coin logo
Codédex

PythonIntermediate PythonNumPySQLGen AI
HTMLCSSJavaScriptIntermediate JavaScriptReactp5.jsNode.js
Command LineGit & GitHub
C++JavaData Structures & Algorithms

Exercise

03. Ne星βδ星Δ[?

Headings

Let's look at some more elements.

Suppose we want to add a headline to our website that displays a news article. Here's how we would do it using a <h1> heading element and a <p> paragraph element:

<body>
  <h1>Breaking News 🚨</h1>
  <p>Florida man once evaded arrest by cartwheeling now running for mayor.</p>
</body>

There are six levels of headings, from <h1> to <h6>:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Here's the result:

HTML headings sizes comparison

Note: Only one <h1> element should be used in a .html file.

Line Break

Suppose we also want to add a new line within a paragraph element. Pressing enter won't do us any good because HTML ignores multiple spaces and line breaks within elements.

So we must use the <br> break tag here!

The <br> break tag adds a line break:

<body>
  <h1>Breaking News</h1>
  <p>Florida man robs convenience store with an alligator.<br>Leaves a baby Crocs behind.</p>
</body>

A self-closing tag doesn't need to be closed manually by a closing tag... it does not have a separate closing </tag>. The break tag is the first one we have encountered.

The final code will become:

Florida man

Instructions

The New York Times is an American daily newspaper that has been around since 1851. Iconic. 📰

Create a newspaper.html file with what was happening in the news on the day you were born!

Find The New York Times newspaper from your birth date by using their Site Map.

Recreate an article's title and a blurb with:

  • A <h1>-<h3> heading element.
  • A <p> paragraph element.
  • A <br> line-break element.

Help

Get a Hint

Want the solution? Try completing the lesson first!

New Item Unlocked!

pom pom characters gifitem duck

Rubber Duck NEW

Rubber duck debugging is a classic technique used by developers to debug code. By explaining the code line-by-line to a rubber duck, you can break down the code into smaller pieces, and potentially identify the error.

... It's silly, we know.

New Item Unlocked!

pom pom characters gifitem duck

Codédex BotNEW

I’m a coding mentor bot built with GPT-4 👋. I’m here to answer any questions related to programming, Codédex, and much more.

FEATURE UNLOCKED!

sad characters gif

You have 100 XP! This means you can now join our Discord community to chat and hang out with fellow learners and the team behind Codédex!
See you there. 😊

Join Discord

FEATURE UNLOCKED!

pom pom characters gif

You have 250 XP! This means you can now join our On-Platform community to chat and hang out with fellow learners!
Say hi in the Introductions channel. 😊

Join Community
ga

Welcome to the General Assembly x Codédex experience!

Complete the following mandatory chapters:
HTML Chapters 1-2, CSS Chapters 1-2, and JavaScript Chapters 1-2.

You will submit the code in the last exercise of each of the chapters:

python logoHTML

Exercise 7: Favorite Band

Exercise 14: MySpace Top 8

python logoCSS

Exercise 5: Concert Flyer

Exercise 12: Invitation

python logoJavaScript

Exercise 5: Receipt

Exercise 10: Planet Weight

Once you've completed all of them, you can submit your work
and tell us about your experience!

js logonewspaper.html

user image
send image
user image

Hi, I’m Codédex Bot! I’m a coding mentor bot built with GPT-4 👋.

I’m here to answer any questions related to programming, Codédex, and much more.

For example, try to ask something like:

  • What are classes and objects in Python?
  • How to create a table in HTML?
  • What's if (variable > 2) print(‘greater’)?
  • What's Codédex Club?
send image
item duck
Loading...

index.html

Your code results will appear here when you Run the project.

user image
send image
user image

Hi, I’m Codédex Bot! I’m a coding mentor bot built with GPT-4 👋.

I’m here to answer any questions related to programming, Codédex, and much more.

For example, try to ask something like:

  • What are classes and objects in Python?
  • How to create a table in HTML?
  • What's if (variable > 2) print(‘greater’)?
  • What's Codédex Club?
send image

THE ORIGINS I: HTML

Elements

01. Shooting Star

02. Elemental

03. Newspaper

04. Corporate Talk

05. Sous-Chef

06. Lost Pet

07. Favorite Band

Structure

Forms

Semantic HTML

Final Project

03. Newspaper

10 XP

Did you know that you can join our Community to get live help from our Code Mentors?

OR

03. Neλ-Γトタン]

Headings

Let's look at some more elements.

Suppose we want to add a headline to our website that displays a news article. Here's how we would do it using a <h1> heading element and a <p> paragraph element:

<body>
  <h1>Breaking News 🚨</h1>
  <p>Florida man once evaded arrest by cartwheeling now running for mayor.</p>
</body>

There are six levels of headings, from <h1> to <h6>:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Here's the result:

HTML headings sizes comparison

Note: Only one <h1> element should be used in a .html file.

Line Break

Suppose we also want to add a new line within a paragraph element. Pressing enter won't do us any good because HTML ignores multiple spaces and line breaks within elements.

So we must use the <br> break tag here!

The <br> break tag adds a line break:

<body>
  <h1>Breaking News</h1>
  <p>Florida man robs convenience store with an alligator.<br>Leaves a baby Crocs behind.</p>
</body>

A self-closing tag doesn't need to be closed manually by a closing tag... it does not have a separate closing </tag>. The break tag is the first one we have encountered.

The final code will become:

Florida man

Instructions

The New York Times is an American daily newspaper that has been around since 1851. Iconic. 📰

Create a newspaper.html file with what was happening in the news on the day you were born!

Find The New York Times newspaper from your birth date by using their Site Map.

Recreate an article's title and a blurb with:

  • A <h1>-<h3> heading element.
  • A <p> paragraph element.
  • A <br> line-break element.

Help

Get a Hint

FEATURE UNLOCKED!

sad characters gif

You have 100 XP! This means you can now join our Discord community to chat and hang out with fellow learners and the team behind Codédex!
See you there. 😊

Join Discord

FEATURE UNLOCKED!

pom pom characters gif

You have 250 XP! This means you can now join our On-Platform community to chat and hang out with fellow learners!
Say hi in the Introductions channel. 😊

Join Community

js logo

user image
send image
user image

Hi, I’m Codédex Bot! I’m a coding mentor bot built with GPT-4 👋.

I’m here to answer any questions related to programming, Codédex, and much more.

For example, try to ask something like:

  • What are classes and objects in Python?
  • How to create a table in HTML?
  • What's if (variable > 2) print(‘greater’)?
  • What's Codédex Club?
send image
item duck
Loading...

index.html

user image
send image
user image

Hi, I’m Codédex Bot! I’m a coding mentor bot built with GPT-4 👋.

I’m here to answer any questions related to programming, Codédex, and much more.

For example, try to ask something like:

  • What are classes and objects in Python?
  • How to create a table in HTML?
  • What's if (variable > 2) print(‘greater’)?
  • What's Codédex Club?
send image