Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Adding Content

Bringing Headings and Paragraphs Together

  • Start a brand new page with the template.html file
  • Click File>save as and save with a new name, such as "coding.html" or "experiment.html"
  • Remember, no spacing or special characters and always try to use lower case letters for your file name.
  • Edit the text between the <title> and </title> tags to describe the web page content.
  • Give your page a good foundation by using the <h1></h1> tag set first, and type a quick summary of the main topic of your page.

For my example, I am going to create a web page about food…mmmm, one of my favorite subjects. You may opt to utilize the same topic, or experiment with a different subject.

See the below coding example for my edited title and added heading text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Debbie’s Favorite Foods</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Debbie’s Favorite Foods</h1>

</body>
</html>
  • Type in an opening paragraph. Something that gives a more detailed description of what your page is about.
  • Remember, you can type your paragraph content first, then add <p> and </p> tags accordingly. I like to type the <p> and </p> then type content in between them. Try both ways and see what works best for you!

Keep in mind the "Well Formed xhtml Coding" tips from a prior tutorial.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Debbie’s Favorite Foods</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Debbie’s Favorite Foods</h1>
<p>I would love to share my favorite foods with you.</p>
</body>
</html>

Ready to add a second level heading?

  • Type the <h2></h2> tag set and then type text for the second level heading.
  • Add another paragraph to elaborate on this topic further.

See my example below, but feel free to use your own topics.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Debbie’s Favorite Foods</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Debbie’s Favorite Foods</h1>
<p>I would like to share my favorite foods with you.</p>
<h2>Italian Dishes Rock My World</h2>
<p>This might be my favorite food of all time. Scrumptious meatballs and chicken parmesan are yummy main dishes. I just love pasta. Give me red tomato sauce, pesto sauce, or garlic and oil. I love it all!</p>
</body>
</html>

If you insert extra enter breaks in between each line of code, you might find it easier to read your code later. Adding extra enter breaks will not affect the spacing displayed on your web page.

  • Experiment by typing a few more headings and paragraphs.
  • Remember to the logical order of your <hx> tags. Please refer back to the Headings Tutorial for details if needed.

View my example 1coding.html file using headings and paragraphs.

View Web File In Your Browser

While you are designing your page, it is important to frequently view the progress in a Web browser.

  • Save frequently, then open your file in your favorite web browser. (Please take another peek at the Viewing Your Webpage tutorial for further details.)
  • Keep the browser window open while working in your text editor. To view the most recent version of the page in your browser, hit the F5 key on your keyboard or hit the "refresh" button in your browser. Just make sure your file is saved first.

Note: Some advanced text editors offer a Preview option. Click the preview button and your default web browser will launch, displaying your web page file.

How does your Web page look so far?

What do you want to learn next? « ParagraphsText Generators »

4 Comments

  1. Comment by neil pearce on September 30th, 2007

    Hi debbie, just thought i would say how nice it is to have a good, all round, informative web site on web design. I have just passed my third CIW certificate using self study and even though i have professional status, i still need to read jargon free tutorials ( which your site is) and learn to grasp some aspects of web design. I like the tip about inserting extra enter breaks between lines of code so it’s easier to read.I keep losing my way now and then so that has cleared that up.
    You now have a regular user, so keep up the good work.
    Neil
    Essex
    U.K

  2. Comment by debbie T on September 30th, 2007

    Awe, thanks so much Neil! You are very sweet to take the time to write!

    Keep having fun!

  3. Comment by Destiny on November 4th, 2007

    Your site is awesome! The lessons are very well written with excellent examples, reference links and advise on the do’s and don’t’s.

    Keep up the great work!

    Thank you,

    *Destiny*

  4. Comment by debbie T on November 5th, 2007

    Hello Destiny,

    Thank you so much for commenting. I am happy you are enjoying the site! It is very nice to hear!

Leave a Comment

If you would like to make an observation or suggestion, please take the time to write a comment. If you prefer to contact me privately, there is a contact form.