Lab 1

HTML Examples

Heading Tags

Text documents are often broken up into several sections and subsections. Each section is usually prefaced with a short title or heading that attempts to summarize the topic of the section it precedes. For instance this paragraph is preceded by the heading Heading Tags. The font of the section headings are usually larger and bolder than their subsection headings. This document uses headings to introduce topics such as HTML Documents, HTML Tags, Heading Tags, etc. HTML heading tags can be used to format plain text so that it renders in a browser as large headings. There are 6 heading tags for different sizes: h1, h2, h3, h4, h5, and h6. Tag h1 is the largest heading and h6 is the smallest heading. A span sits in this sentence without starting a new line.

h1

h2

h3

h4

h5
h6

Yingzi Zhang

I am learning HTML.

Lab notes

This sample outline organizes notes for an HTML exercise.

What I built

A sample page demonstrates headings at different levels.

Next step

Add a paragraph to describe the next example.

Paragraph Tag

This is a paragraph. We often separate a long set of sentences with vertical spaces to make the text easier to read. Browsers ignore vertical white spaces and render all the text as one single set of sentences. To force the browser to add vertical spacing, wrap the paragraphs you want to separate with the paragraph tag

This is the first paragraph. The paragraph tag is used to format vertical gaps between long pieces of text like this one.

This is the second paragraph. Even though there is a deliberate white gap between the paragraph above and this paragraph, by default browsers render them as one contiguous piece of text as shown here on the right.

This is the third paragraph. Wrap each paragraph with the paragraph tag to tell browsers to render the gaps.

The p tag marks a block of text as a paragraph. Browsers apply top and bottom margins to paragraphs by default, creating vertical spacing between them.

Hello, my name is Yingzi Zhang. I am currently a computer science student at Northeastern University.

My goal for this course is to master all the technologies covered in class and complete my first web development project.

List Tags

Ordered List Tag
How to make pancakes:
  1. Mix dry ingredients.
  2. Add wet ingredients.
  3. Stir to combine.
  4. Heat a skillet or griddle.
  5. Pour batter onto the skillet.
  6. Cook until bubbly on top.
  7. Flip and cook the other side.
  8. Serve and enjoy!
Unordered List Tag
My favorite books (in no particular order)
  • Dune
  • Lord of the Rings
  • Ender's Game
  • Red Mars
  • The Forever War
HTML Tags from This Chapter
  • h1 — marks a top-level heading.
  • p — groups text into a paragraph.
  • ol — groups items into an ordered list.
  • ul — groups items into an unordered list.
  • li — represents one item in a list.
  • table — organizes data into rows and columns.
My Favorite Recipe: Pizza
  1. Prepare the dough and roll it out into a pizza base.
  2. Spread tomato sauce over the base, then add cheese and toppings.
  3. Bake the pizza until the crust is golden and the cheese has melted, then slice and serve.
My Favorite Books and Magazines
  • The Great Gatsby
  • Atomic Habits
  • Scientific American

Table Tag

Sample Quiz Grades
QuizTopicDateGrade
Q1HTML2/3/2185
Q2CSS2/10/2190
Q3JavaScript2/17/2195
Q4React2/24/2188
Q5Props3/3/2192
Q6State3/10/2190
Q7Routing3/17/2186
Q8Forms3/24/2194
Q9HTTP3/31/2191
Q10APIs4/7/2189
Average90
My Web Development Learning Plan
StepTopicGoal
1HTMLBuild the structure of my first website.
2CSSStyle the website with the techniques covered in class.
3React and Next.jsComplete my first web development project.

Image tag

Loading an image from the internet:
Starship
Loading a local image:
Tesla Bot (Optimus) humanoid robot
A Food I Like
Illustration of pizza with cheese, tomato sauce, and toppings
Sample Image from Space
Earth photographed by the Apollo 17 crew

Form Elements

Text Fields



Text boxes

Radio buttons

Favorite movie genre:





How often do you watch movies?




Checkboxes

Favorite movie genre:





Dropdowns

Select one

Select many

Other HTML field types





Buttons

Student Profile

Yingzi Zhang — Northeastern University. Graduate student, full-time. Expected graduation: December 2027.





Class standing
Enrollment
Interests





Program started in September 2024. The exact day is not specified, so the date field is left blank.



This HTML prototype does not store or send profile information.

Highlighted Paragraph

Default highlight: light yellow background, orange border.

Custom props: light blue background, navy border, thicker width, more rounding.

Another variation: misty rose background, crimson border, square corners.

I am Yingzi Zhang, a computer science student at Northeastern University.

Props let the same component render with different colors.

Highlighted Box

Callout

This box wraps any children — headings, paragraphs, lists, and more.

  • backgroundColor
  • borderColor
  • borderWidth
  • borderRadius

A second box with different style props wrapping different content.

Yingzi Zhang — Course Goals

  • Learn the HTML techniques covered in class.
  • Master the course technology stack.
  • Complete my first web development project.

Sample nested content

  • p
  • table
  • form