Intro to HTML

 

HTML: Hyper Text Markup Language

Slide 2: Markup vs. Programming

Programming, as we’ve learned, is about giving the computer a set of instructions. We have seen several programming languages, most notably Scratch and Python.

Markup is more about designing something. Currently, most markup languages are used for website design. The cornerstone of website design is HTML, CSS, and JS.

Other types of markup language include LaTeX (my favorite), XML, and SVG.

Slide 3: Starting an HTML Project

There are two programs you need for an HTML project: a text editor and a browser.

The text editor you’ll be using is called “gedit” (or text editor, gedit is better though)

Any browser on your computer will do.

Slide 4: gedit

The first thing we’re going to do after opening Gedit is to save our new file. Save it as webpage.html

If you don’t have the .html extension at the end of your filename, it won’t work.

Save it in your handin folder

Slide 5: Your first page

<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>

The whitespace in HTML doesn’t actually matter like it does in Python, but it helps you read it better. I used spaces instead of tabs.

Slide 6: Viewing your progress

You can see your progress at anytime by using the browser. If you make changes to your webpage, then you need save and hit the refresh button to see them.

/home/your_name/handin/webpage.html

Slide 7: Tags

There are different types of tags for different parts of the webpage.

<html>  Everything goes between these 2 tags. They should be vertical </html>

<head> This text goes in the title bar of the web browser </head>

<body> All of you web page text goes here. These should also be vertical </body>

<h1> This is a heading (the numbers go to 6) </h1>

<p> This is a paragraph </p>

Slide 8: Headings

<!DOCTYPE html>

<html>
<head>
<title>This is a title</title>
</head>

<body>

<h1> This is the biggest header</h1>

<h2> This is slightly smaller </h2>

<p>This is a paragraph</p>
</body>

</html>

Slide 10: You Try

Make a web page!

Write about your favorite food.

Use at least 2 headings and 2 paragraphs.