html coding for beginners - html for beginners - html for dummies

HTML for Dummies

HTML (Hypertext Markup Language) is the foundational code that is used to structure a web page and its content. Similar to written and printed documents, HTML structures the web page layout with paragraphs, bullet lists, numbered lists, images, and tables. 

The basic HTML coding for beginners is simple and can join with CSS (Cascading Style Sheets) to add an infinite number of creative design aspects. For this tutorial, let’s examine what it takes to do a simple layout so that you feel comfortable working with the HTML code. All you need to start with is a simple code editor such as Notepad, which is free.

Let’s get started.

Tags, Attributes and Elements

You must have a clear understanding of the naming conventions in the world of HTML. For all things in life, we need to have proper naming conventions so that we can understand the world. In the case of HTML, we have tags, attributes, and elements. In addition to this, we wrap everything in <> for the purpose of HTML coding. Let’s examine what all of this means in context to a webpage.

Tags

The basic structure of an HTML for beginners document includes tags, which surround content and apply meaning to it. You will see these in the sample section below all of the following tags. Here is what they mean.

  • <!DOCTYPE html>: The first line on the top is a document type declaration and it lets the browser know this is an HTML page.
  • <html>: This is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. 
  • Everything between <body> and </body> is the main content of the document that will appear in the browser window.

Attributes

Tags can also have attributes which are extra pieces of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like <tag attribute=”value”>text</tag>. 

In the following, both src and alt are attributes to the img tag. An img tag is for an image such as a photograph or even an illustration.

The attribute src defines where the image is stored, and the alt attribute defines what the image is (used in cases where a visually impaired person is viewing a web page and has voice recognition).

<img src=”img_girl.jpg” alt=”Girl with a jacket”>

Values

Values are what you define for an attribute and they are always enclosed in quotation marks. You may have a color that you want to define, or the size of a font, or the thickness of a border. The list is almost endless. 

You can see the values within the element.  

<span style=”color:blue;font-weight:bold;font-size:18pt;”> your body text goes here</span> 

Elements/Element Content

Elements define the structure of your web page content. The content as you see on the screen is contained between the <body> tags. Elements such as headers and body text, and bullet lists are all defined with a long list of possible tags such as <h1>, <p>, <li>. The tags surround the pieces of information creating what we call an element.

HTML for Beginners: Notes to Remember

  • When adding an element, you will need to make sure you close the element as well. For body content, you start with <body> and then add </body> to close the element. It will look like this: <body> content here </body>.
  • Make sure that when you are adding Alt text for image information, that you add closing quotation marks so that the browser knows it is done and does not show it on the page.
  • Be careful to watch your uppercase and lowercase use of named elements.
  • To track what your code means, you can add what we call “comments” into the code which gives you information on each block of code as you wish to label it for future reference. The <! — comment –> is an HTML comment tag.

Starting Your First HTML Page

To begin, open a text editor such as Notepad. 

Add the following code to get things started:

<!DOCTYPE html><html>
<body>
</body>
</html>

If you simply click “save” the text editor will want to save the file as a .txt file, but you don’t want this. What you want is an .html file. Save your document as “practice.html” so that your browser can open this and understand what it is. Your browser will not open a .txt file.

Now add in some text so that we can test this out in a web browser. Add in “Udacity will help you to explore new areas of HTML web development.” 

We will add the <p> element to let the browser know that this is basic paragraph text.

<!DOCTYPE html><html>
<body>   
<p>Udacity will help you to explore new areas of HTML web development.</p></body>
</html>

If you double click your practice.html file, it should open in your default browser and should look something like this:

Now let’s add a bullet list.

Add in the following HTML code:

<!DOCTYPE html>
<html>

<body>
   <p>Udacity will help you to explore new areas of HTML web development.</p>

<ul>
  <li>first line</li>
  <li>second line</li>
  <li>third line</li>
</ul>


</body>
</html>

The web result looks as follows:

As you are in the world of HTML coding for beginners and have just created your first bullet list, you will now want to create a numbered list or as in the world of HTML, we call it an ordered list. An ordered list is when you have steps to follow as in a specific procedure. Perhaps you are writing a cookbook and need to follow the recipe and not skip steps. Similarly in a repair guide, you would want to follow specific ordered steps.

Instead of this Unordered List (UL),

<ul>
  <li>first line</li>
  <li>second line</li>
  <li>third line</li>
</ul>

You will simply replace the <ul> with <ol> for an ordered list <ol>:

<ol>
  <li>first line</li>
  <li>second line</li>
  <li>third line</li>
</ol>

And you will see the following layout:

Now if you want to add a table we will need to add the following to define table rows and columns. We will also define a border on the table so that it outlines the table itself using <table border=”1”>.

<!DOCTYPE html>
<html>

<body>
   <p>Udacity will help you to explore new areas of HTML web development.</p>

<ul>
  <li>first line</li>
  <li>second line</li>
  <li>third line</li>
</ul>

<table border=”1”>
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
        <td>Row 1, cell 3</td>
    </tr>
    <tr>
        <td>Row 2, cell 1</td>
        <td>Row 2, cell 2</td>
        <td>Row 2, cell 3</td>
    </tr>
    <tr>
        <td>Row 3, cell 1</td>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
    </tr>
    <tr>
        <td>Row 4, cell 1</td>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
    </tr>
</table>


</body>
</html>

The web result is this:

You can see the difference in headings as well. Let’s use <h1>, <h2>, and <h3> to see the difference.

To recap our HTML for Dummies, we reviewed:

  • Basic understanding of terms such as Values, Elements, Attributes, and Tags.
  • Basic HTML to start a web page.
  • Bullet list
  • Numbered list
  • Tables
  • Headers of different levels

This is a solid foundation and definitely warrants further investigation into this very creative world where we went from the print world, to the world wide web, being able to communicate globally with a web page of your own design.

There are many places available for further investigation. Be sure to check out Font Weight, Font Families, and Background Image Size. These tutorials will help you to understand the wide range of possibilities for creative layout and design.

Where to Next?

This introduction to HTML for Dummies should provide a starting point for further inquiry into the design, layout, and practical applications of HTML. As you can see, there are virtually unlimited creative aspects that HTML offers. 

We will continue to explore other areas of HTML design in the next blog. We hope this introduction has piqued your interest and inspired you to explore further and dive deeper into the world of web design.

Be sure to check out more tutorials on our HTML Hub page as well as tutorials on the CSS Hub page.

“HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!

Explore our course catalog and start your own learning journey with Udacity today!

Start Learning