Intro to HTML (from Girls Who Code website)

You've learned that you can use HTML to show things on a webpage and JavaScript to change things on a webpage. Let's use the Trinket account that you set up to create your own interactive magazine!

We can split web design into three different parts:

  • HTML, which displays content on your webpage.
  • CSS, which styles the content on your webpage.
  • JavaScript, which is the programming language that makes your webpage do things.

You can't have an online interactive magazine without first knowing how to make the webpage. The big idea we will learn is using HTML tags to display webpage content.

It takes bravery to create something from a blank canvas. Let's get started to see where our bravery takes us!

Big Idea
Learn about HTML.

HTML

What is HTML?

Most of the stuff on the web is no different than the other stuff stored on your computer. It’s simply a whole load of files sorted into different file folders. HTML is the standard language for creating these files which we call webpages. HTML stands for HyperText Markup Language, and is considered the skeleton of a webpage. It controls what shows up and where things go on the page.

HTML elements are the building blocks of HTML webpages. HTML tags represent an HTML element, and are used to label pieces of content such as "heading", "paragraph", "table", and so on. Your web browser will not display the HTML tag on the webpage, but will only use it to figure out what type of item to send to your screen.

  • HTML TAGS usually come in pairs like <p> and </p>.
  • The first tag in a pair is the start tag, or opening tag. The second tag is the end tag, or closing tag.
  • The end tag is written like the start tag, but with a forward slash inserted before the tag name.

Here is an example of what an HTML element looks like:

Campus simple-html-element

TAG, You're It!!

freezetag-1

What happens when you touch someone in a game of tag? They become "it" or they may "freeze". Touching someone after you've chased them is how you offically mark someone. Once that person touches someone else, they are no longer "it", because they have marked someone else.

Just like a game of tag, HTML tags are used to mark text. In fact, that's why it's called a Hypertext Markup Language.

In tag, players respond a certain way depending on whether they're tagged as it or not it. In HTML, text can be tagged as some of the elements described below.

Commonly Used Tags

Tag Name Definition
<html> This element is the root element of a webpage. It tells the web browser what type of document it's reading.
<head> This element contains descriptive information about the webpage.
<title> This element gives your webpage a title. The title is not visible on your webpage, but can be found on the browser tab.
<body> This element contains the content that will be visible on your webpage.
<h1> The element defines a large heading.
<p> This element defines a paragraph.
<img> This element defines HTML images.

Visual Examples

Below is a visual of an HTML page structure using some of the commonly used tags described above.

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Built By Girls Who Code