Patatoe Programming

HTML is markup

HTML has sections that are enclosed with an opening and closing "tag". For example, some paragraph has the content: "some paragraph" inside the HTML "p" tag. Which is short for paragraph, enclosing some paragraph content. HTML uses alot of adjectives and descriptions because it is intended to be very verbose, easy to read in code (as in not cryptic with symbols everywhere), and contextual. Things like what a paragraph don't tell you how the page should look. However, YOU the person (or browser) can decide what a paragraph normally looks like. Headers, tables, abbreviations, etc. can be similar or different depending on culture or context. A screenreader could look at all of the descriptive tags, and speak out a webpage with all of it's connotations details. Later, we'll learn to use CSS or style sheets to change how these LOOK on the page.

Getting started

You don't need a webserver to get started at this point. Just work on this in your favorite editor (like notepad (: ), then save it on the computer with the .html or .htm extension and open it with your web browser. After making any changes, refresh the page.

HTML basic structure

Here is the bare minimum for standard HTML5


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		Hello Web!
	</body>
</html>

<!DOCTYPE html>

Tells the browser, "This is an HTML page". Before html5, this was very long and annoying with defining what version of html or xhtml (like xml+html) it was.

<html>

This begins the HTML section of the page.

<head>

This head section has alot of things ABOUT the webpage. Nothing in this section is ever shown. In here we have meta data, resources, title bar, keywords, and other thingies we'll see.

This isn't strictly needed, but alot of browsers do want this. It tells the browser, "Hey this page is using Unicode, not just ASCII."

<body>

This is where the webpage that is shown actually begins.

All of this will give you a plain hello world website.

Other things to know

To debug, search online for a validator. In the browser, view the page source. Some browsers (Firefox confirmed) will highlight improper HTML. You can also see additional errors in the console in the developer tools (may need to refresh after opening).

Be sure to have proper nesting! Don't do hello!. Wikipedia - Tag Soup

Browsers were designed to handle very poorly written HTML. The browser will try it's best to fill in missing info. Just because the webpage looks as you expected, doesn't mean it's ok.

Unless it is inside of a <pre> tag/style, HTML condenses all whitespace into just one space.