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.

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.

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!
My favorite recipe: Chicken Noodles
  1. Boil noodles with a little salt & oil, drain, and keep aside.
  2. Cook chicken (boneless strips/cubes) with salt, pepper, and a little soy sauce.
  3. Heat oil in a wok/pan, sauté garlic, onion, and green chilies.
  4. Add veggies (carrot, capsicum, cabbage, beans) stir fry on high flame.
  5. Mix in chicken with the veggies.
  6. Add sauces soy sauce, chili sauce, tomato sauce, vinegar, black pepper, salt.
  7. Toss noodles with the mixture until well coated.
  8. Garnish with spring onions and serve hot.
Unordered List Tag
My favorite books (in no particular order)
  • Dune
  • Lord of the Rings
  • Ender's Game
  • Red Mars
  • The Forever War
Your favorite books (in no particular order)
  • Carl Sagan Cosmos
  • Mario Puzo Godfather
  • The Sicillian
  • Harry Potter and The Prisoner of Azkaban
  • The Chronicles of Narnia

Table Tag

QuizTopicDateGrade
Q1HTML2/3/2185
Q2CSS2/10/2190
Q3JavaScript & React2/15/2182
Q4Routing2/20/2189
Q5State & Redux2/25/2182
Q6Node3/05/2194
Q7Session3/10/2180
Q8MongoDB3/15/2187
Q9Mongoose3/20/2182
Q10APIs3/25/21100
Average87.1

Image tag

Loading an image from the internet:
Starship
Loading a local image:
Teslabot

Form Elements

Text Fields



Text boxes

Buttons
Radio buttons




Checkboxes




Dropdowns

Select one

Select many

Other HTML field types





Anchor tag

Please click here to get dummy text

Github Anchor Tag

Please click here to get to my GitHub