How to Write a Web Page from Scratch

March 14, 2015

<html>
	<head>
	
	</head>
	
	<body>
	
	</body>
</html>

I gave a quick introduction to writing HTML web pages over the last interim. The basic outline of a web page can be seen above (but there’s no content in there, so if you tried this file in a web browser you’d get a blank page). Everything is set between tags. The open html tag (<html>) starts the document, and the close html tag (</html>) ends it.

The head section (<head>) holds the information needed to set up the page, while the body section (<body>) holds the stuff that’s actually on the page.

For example, if I wanted to create a heading and a paragraph of text, I would just put it in the body, like so:

<html>
	<head>
	
	</head>
	
	<body>
		<h1>My Heading Here</h1>

		This is my text.
	
	</body>
</html>

Note that the heading is placed between h1 tags. And the result should look like this:

Basic webpage.

Basic webpage.

Now save this file as an html file, which means save it as a plain text file using a .html extension (e.g. test.html) and open the file in a browser.

Note on Editors: I’ve found that the best way to do this is by using a simple coding editor. I recommend my students use GEdit on Linux, Smultron (free version here) or GEdit on Mac, and Notepad++ on Windows. You don’t want to use something like Microsoft Word, because complex word processing software like it, LiberOffice and Pages need to save a lot of other information about the files as well (like the font style, who created the file etc.).

CSS Styling

But we typically don’t want something so plain, so we’ll style our heading using CSS. Usually, we’ll want all of our headings to be the same so we set up a style to make all of our headings blue. So we’ll add a styling section to our header like so:

<html>
	<head>
	
		<style type="text/css">
			h1 { color: blue; }
		</style>	
		
	</head>
	
	<body>
	
		<h1>My Heading Here</h1>
		
		This is my text.
	
	</body>
</html>

Which gives:

Styling the heading.

Styling the heading.

There are a few named colors like blue, but if you want more freedom, you can use the hexadecimal color codes like “#A3319F” to give a kind of purple color (hexadecimals are numbers in base 16).

DIV’s to Divide

Finally, we’ll often want pages with separate blocks of information, so let’s make a little column for our heading and paragraph. We’ll make the background yellowish, put a border around it, and give it a set width.

To do this we’ll place our heading and paragraph into a DIV tag, which does not do anything but encapsulate the part of the web page we want into sections.

<html>
	<head>
	
		<style type="text/css">
			h1 { color: blue; }
		</style>	
		
	</head>
	
	<body>
		<div id="section1">
			<h1>My Heading Here</h1>
		
			This is my text.
		</div>
	</body>
</html>

Note that I’ve given the div tag an id (“section1), this is so that I can refer to that section only in the styling section using “#section”:

<html>
	<head>
	
		<style type="text/css">
			h1 { color: blue; }
			
			#section1 {
				background-color: #A2A82D;
				border: solid black 2px;
				width: 400px;
			}
		</style>	
		
	</head>
	
	<body>
		<div id="section1">
			<h1>My Heading Here</h1>
		
			This is my text.
		</div>
	</body>
</html>

to give:

More styling.

More styling.

Unleashed

With that introduction, I set students loose to make their own web pages. They had to make two page, both linking to the other, and one of them being an “About Me” page.

There are lots of places on line to find out what HTML tags and CSS styles are available and how to use them, so my goal was to introduce students to the language they needed to know.

One issue that came up was the use of copyrighted images. Current adolescents see everything online as part of a sharing culture–most of my students for this lesson had Pintrest accounts–and it took some explanation for them to understand why they should not use that cute gif of a bunny eating a slice of pizza without getting permission from the author (or at least finding out if the artwork was free to use).

Finally, I did do a quick intro on how to using JavaScript (with Jquery) to make their pages more interactive, but given that we only had two days for this project, that was pushing things a little too far.

Citing this post: Urbano, L., 2015. How to Write a Web Page from Scratch, Retrieved May 30th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Project Euler: Math/Programming Challenge

February 26, 2014

On the recommendation of Mr. Schmidt, two of my students have been quite fascinated over the last few days trying to solve problems on Project Euler. They’ve been working on them together to, I suspect, the detriment of some of their other classes, but as their math teacher I find it hard to object.

An example problem is something like this:

If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.

Find the sum of all the multiples of 3 or 5 below 1000.

They’ve been solving them numerically using Python. It’s been quite fascinating to see.

Citing this post: Urbano, L., 2014. Project Euler: Math/Programming Challenge, Retrieved May 30th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

How Google Works

February 3, 2012

One of the librarians at Washington University played this video for our students. It was a great supplement to their lesson on how to use the internet for research.

Citing this post: Urbano, L., 2012. How Google Works, Retrieved May 30th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

How to do Research on the Internet: A Lesson

February 3, 2012

This morning I did a little presentation with the middle school on how to do research on the internet, and we actually had a very good discussion. I focused on two key things: assessing credibility and writing citations (giving credit).

Credibility

[Henry] Hudson’s main goal as an explorer was to find a northern passage to the Orient. … He started his journey in May of 1607 and returned in September of the same year when his route was blocked by the Great Barrier Reef.

— All About Explorers (accessed Feb. 2012): Henry Hudson

I started by having the students to look up some explorers. If you prefix an explorer’s name with “all about explorers” (e.g. “all about explorers Christopher Columbus) the first link on google leads to the right website.

They were supposed to read the page and recorded three facts that they found interesting, but, in doing so, it pretty quickly becomes apparent that the information might not be very reliable; Columbus did not, after all, have to rely on infomercials to build support for his expedition.

The All About Explorers website was created by a group of teachers to be a tool for teaching about how to do research on the internet.

Having them see the site come up on google is, I think, better than sending them directly to the url. Google is usually their first recourse for researching anything, so it’s nice to see that google does not give information about credibility.

The discussion that ensued ranged pretty widely, but a key question that kept recurring was: how do you judge the credibility of a website. We talked a little bit about the possible biases of commercial .com and .net websites, and about the fact that .org’s may well also have their own biases, since it does not require any credentials to set one up (see montessorimuddle.org for example). On the other hand, while .gov and .edu domains (as well as most U.S. state and other country websites) are restricted to governments and colleges, that improves their credibility, but, in itself, is no guarantee of accuracy or being unbiased.

So much of assessing websites’ credibility comes from experience, which students just don’t have much of yet, so I recommended that checking with teachers and adults might be a good bet. Confirming data from multiple sources also helps, but you have to be careful, since so many websites now use Wikipedia as a source (or even reprint things directly from Wikipedia) that any errors in a Wikipedia page can spread far and wide pretty fast.

We did not get into how to use Wikipedia well (go for the sources at the bottom of the page), but we’ll get to that later.

Citing

For the second part of the lesson, I had them look up the same explorers they’d searched on the All About Explorers website. They had free range to search anywhere they wanted, but not only did they have to now collect facts but were to also find a good picture.

I’d wanted the pictures so we could talk about copyright and getting permissions to use media, but we did not get that far.

While they were satisfyingly more skeptical about where they got their information from, they were quite happy to give me the facts they’d found without attribution.

So I took the chance to talk about citing sources: to give credit where it is due; to avoid even the appearance of plagiarism; to give your reader an idea of how credible your sources are (and by extension how credible you are); and to let you readers know how up-to-date your information is.

An example of a citation for a website.

Conclusion

For the next week or so the middle and high school are on an interim. This is our writing interim, so they’ll be working on research projects (including how to do research) and creating publications (I’m in charge of the science journal).

Since more and more research is going online, hopefully this was a good primer to get students started.

Citing this post: Urbano, L., 2012. How to do Research on the Internet: A Lesson, Retrieved May 30th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Haiku Finder: Haikus are everywhere

January 11, 2011

Haiku Finder is a quick and extremely dirty way of finding haiku’s in any texts.

You may not want to let your students find out about this site, or, alternatively, having them plug in their existing texts might make for an interesting way of introducing haikus.

I’m not particularly poetic (tell me something I don’t know), I have to go back through a month of posts to get my first Muddle haiku:

One of those things is
that rabbits eat their own poop.
Well not exactly.

— from On Rabbit Digestion

Citing this post: Urbano, L., 2011. Haiku Finder: Haikus are everywhere, Retrieved May 30th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Sex. Ed. on TV update

December 23, 2010

The National Campaign to Prevent Teen and Unplanned Pregnancy has recently issued a report showing that teen pregnancy dropped by 6% in 2009. They have some evidence that the TV show “16 and Pregnant”, which I’ve mentioned before, is one of the reasons why.

Among those teens who have watched MTV’s 16 and Pregnant, 82% think the show helps teens better understand the challenges of teen pregnancy and parenthood and how to avoid it.
Albert (2010)

Of course, it’s essential to note that, “Teens (46%) say parents most influence their decisions about sex.”

The report has many more details.

Citing this post: Urbano, L., 2010. Sex. Ed. on TV update, Retrieved May 30th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Ngram: The history of words

December 18, 2010

Graphs of the words Montessori and muddle created with Google Ngram.

If you take all the books ever written and draw a graph showing which words were used when, you’d end up with something like Google’s Ngram. Of course I thought I’d chart “Montessori” and “muddle”.

The “Montessori” graph is interesting. It seems to show the early interest in her work, around 1912, and then an interesting increase in interest in the 1960’s and 1970’s. Like with all statistics, one should really be cautious about how you interpret this type of data, however, I suspect this graph explains a lot about the sources of modern trends in Montessori education. I’d love hear someone with more experience thinks.

Alexis Madrigal has an interesting collection of graphs, while Discover has an article with much more detail about what can be done with Google’s database.

Citing this post: Urbano, L., 2010. Ngram: The history of words, Retrieved May 30th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Visuwords: a visual dictionary

December 13, 2010

The definition of parasite on Visuwords.

Visuwords is a great visual dictionary. It not only gives definitions, but shows the links between antonyms, synonyms and etymology.

I plugged in a few of the words from this cycle’s vocabulary lists (parasite, circumnavigate, host, viceroy etc.) and the results were quite neat.

Also, if you double click a word/node it expands to show you the things it’s connected to. This can lead to a quite complex diagram. It would have been great to use it for the word navigator, because it gives a graphic organizer that pretty much covers what we talked about for social world this cycle.

Definition of eukaryote. Notice it links to the word prokaryote (the red line indicates that it's an antonym).

Citing this post: Urbano, L., 2010. Visuwords: a visual dictionary, Retrieved May 30th, 2017, from Montessori Muddle: http://MontessoriMuddle.org/ .
Attribution (Curator's Code ): Via: Montessori Muddle; Hat tip: Montessori Muddle.

Creative Commons License
Montessori Muddle by Montessori Muddle is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.