My First Web Page: Lesson 2: Styles and Layout
Create Your Own Live Mathematics and STEM Web Pages
W3Schools.com: Taking Your Web Page Skills to the Next Level
- Introduction: A Sampler
- Lesson 2: Styles and Layout
- Lesson 3: Adding Beautiful Mathematics to your web page
- Lesson 4: Interacting with your web page
- Lesson 5(a): Adding a GeoGebra Applet
- Lesson 5(b): Adding a Geometry Expressions Applet
- Lesson 6(a): Creating a GeoGebra Assessment Task
- Lesson 6(b): Creating a Geometry Expressions Assessment Task
- Lesson 7: Interacting with Third Party Apps
- Lesson 8: JavaScript, STEM and Internal Device Sensors
- Lesson 9: JavaScript, STEM and GPS
- Lesson 10: Adding Web Bluetooth Support (1): Talking to your SensorTag
- Lesson 11: Adding Web Bluetooth Support (2): Talking to your LaunchPad
- Lesson 12: Introduction to HTML Graphics: Canvas
Let's have another look at that sample lesson from the introductory page in which we added some "more interesting text" - it has been set as the default for this lesson.
You should have noticed that paragraphs are defined between <P> and </P>, and headings can be defined in sizes from 1 to 4.
The entire page lives between an opening <HTML> and a closing </HTML>; the head and body of the page defined similarly.
Did you work out the role of <BLOCKQUOTE>? Very useful since a page needs some whitespace around the edges in order to be easily readable, and (used tastefully) indenting can be a powerful tool to style both look and readability of your page message.
And - even more exciting - see how to define an image using a hypertext link - even one that exists remotely some where else on the web! (many images can be sourced by right clicking and copying the image address to paste into the HTML image tag.) Notice that an image can be placed within a heading or paragraph and aligned left or right to have the text wrap around it - you won’t always get the desired layout result (for that, see tables below) but it is a quick and easy option.
Hypertext links are perhaps the defining element of the World Wide Web, allowing the user of a web page the freedom to roam effortlessly, following ideas unconstrained by the linear demands of normal text. The hypertext reference (href) which generally precedes a link to a web page or something like an image can be either local or remote. The examples you will find in these tutorial samples are generally linked to remote sources, but the ability to link to local pages and images is very simple and important.
Suppose I have my web page in a folder, and an image (say, image.gif) resides in the same folder. Then my link to that image would take the form <img src="image.gif">. Now suppose within my current folder, I create a sub-folder, perhaps called images and place my image there. Then my link would be of the form <img src="images/image.gif">. Simple, right?
But what if the images folder lay at the same folder level as my current folder? To find that image, I would need to go up one level - my address would be <img src="../images/image.gif">. This relative address uses two dots and a backslash to go up a level and this may be used multiple times if your folder system is nested. Of course, move your HTML document and all that lovely relative addressing fails.
Which brings us to emphasis!
As with all good things, a little goes a long way, so moderation is desirable (and not always achieved, in my case!). My main tools of trade in this regard are generally <b> (bold), <i> (italic) and style: <span style="color:red; font-size:24px;"> adding touches of color</span> and <span style="color:green; font-size:10;"> size adjustment as desired</span>.
These style commands may be used with the span tag as illustrated, or within the leading <P> paragraph tag to apply to an entire paragraph - as has been done here!
There are many other useful tags - for mathematics, you may want to try <SUP>superscript</SUP> and <SUB>subscript</SUB>.
Like to know more about HTML elements?
If you have any questions or would like to share your experience with this utility, please drop me an email!
Let's Try Tables for Layout
And Add Some Links, Navigation and More...
As usual, try making changes to the HTML code provided and study the effect - you will learn best by doing.
Congratulations! You now know most of what I knew to create my own web pages for the past twenty years or so. Of course, there is so much more that you can learn - and many of my old-style methods are no longer the preferred way to perform these tasks - BUT, as mentioned previously, the emphasis here will be on mathematics and STEM - to learn good web design, please visit sites like w3schools.com.
I am just giving you enough to get started and to allow us to move quickly to the fun stuff!
Home ← Live Mathematics and STEM on the Web ← My First Web Page: Introduction ← Lesson 2