You are currently viewing Notes on HTML

Notes on HTML

What is HTML?

HTML is HyperText Markup Language. HTML is not a programming language. HTML is a scripting language. HTML is the backbone to every website that exists. We use HTML to layout the website, then we use Cascading Style Sheets (CSS) to make the website look pretty, and if we want functionality such as click events or animation we use JavaScript.

HTML vs HTML5. HTML5 is just the latest version of HTML, and there are no more versions to come. HTML5 will just be known as HTML. At one point, HTML was versioned. HTML had changes, for example, to bold text you would use the <b> tag, then in newer versions, the tag <strong> was used to bold text. Today, we just use HTML to structure the website, and if you want to bold or change the look of text, you will use CSS.

HTML Syntax

HTML has elements that are built from tags. HTML has an opening tag <b> and a closing tag </b>, both tags together make an element. For example, <b>Bold this text.</b>. Also, whitespace does not mean anything in HTML.

<b>Bold this text</b> 
is the same as
<b>
Bold this text.
</b>

Now let’s look at the base structure of an HTML page, and let’s go through the code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    Hello World!
</body>
</html>

Line 1 tells the browser to render this page as an HTML page. The next line gives us the language for the page. In this case, we are using English. This line is also the start of our HTML. It says everything to the closing </html> is our HTML. Next, we have the head element. The head element holds the metadata for the webpage. In this case, we have a few things. We set the charset to UTF-8, which is UTF-8 is a character encoding system. We have a viewport which is needed for responsive webdesign, and we have our page title which is displayed in the title of our browser. So, if we save the above code as helloworld.html, we will have an html page that displays Hello World in the body, and Hello World in the title. We can use an online editor if you like. It is called CodePen, and CodePen is free.

Nesting Elements

Let’s look at nesting. Let’s look at the title element. The title element is nested. The title is nested inside the head element which is nested inside the html element. This comes in handy to know because when we use CSS, we may have to address an element inside another element. Below, is an example of nesting layout.

<parent>
    <child>
        <grandchild>
        </grandchild>
    </child>
</parent>

Now the terminology changes if we are focused on the inside element. It goes in reverse.

<grandchild>
    <child>
        <parent>
        </parent>
    </child>
</grandchild>

Common Elements

Some common elements are Bold, Italics, underline, and div. The <b>bold</b> element bolds text. The <i>italicize</i> element will italicize text, and the <u>underline text</u> will underline text. Another common element is the paragraph element which puts text in a paragraph. <p>This is a paragraph.</p>. The other element is the <div></div> element which is a dummy element. The div does really nothing except as a placeholder. We’ll discuss divs further later. Here is a link to the display of the text below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>heading</h1>
    <h2>heading</h2>
    <h3>heading</h3>
    <h4>heading</h4>
    <h5>heading</h5>
    <h6>heading</h6>

    <b>This is bold</b>
    <i>This is italicized</i>
    <u>This is underlined</u>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa cumque accusantium ducimus natus obcaecati quae veniam reprehenderit quis voluptatum! Iure modi eum facilis praesentium eveniet unde debitis odit ipsam tempora.
    </p>

    <div>
        This is just a placeholder.
    </div>
    
</body>
</html>

Block Elements and Inline Elements

The difference between block elements and inline elements is that block elements take up the whole width of your screen, while inline elements use a little space as needed. Div, p, and h1…h6, for example, are all block elements. The <h1> for example takes up the whole width giving you a title. Now, b, I, or u, are inline elements. They only use the space that is tagged. Otherwise, if b, I, or u, were block they would bump the text to a new line, and that would look horrible.

Links

The web is full of links, so here we show how to make links. We use the <a> element with the attribute of href=””. These can be single or double quotes, and inside of these quotes will be the value which is either an absolute value https://google.com or a relative value of a page on your site. Below is an example of both. Also, if we want to open the page in a new tab or page we add the attribute target=”_blank”.

This is the links.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links</title>
</head>
<body>
    This is an absolute link.
    <a href="https://google.com">This Link goes to Google</a>
    This opens to a new tab or page.
    <a href="https://google.com" target="_blank">Open Google in new page</a>
    This is a relative link.
    <a href="secondpage.html">Go to second page</a>
</body>
</html>

This is the secondpage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Second Page</title>
</head>
<body>
    <h1>Second Page</h1>
    This is a relative link
    <a href="links.html">Go back to links.html</a>
</body>
</html>

Images

To add images we use the <img> tag. Images do not have text, so they do not need a closing tag. Sometimes you will see what is known as a self closing tag <img />. This is the old xhtml way. It is still valid. The <img> tag needs the attribute src=”” which is the source. The source value is the path to the image. The folder where this image lives. Also, this image name needs to be spelled exactly as the image. This is case sensitive. We can also add the attribute of width to control the width of the image as well. The width value will be in pixels. If you only provide a width, the browser will adjust the height, and the opposite works as well. If you just provide the height, the browser will adjust the width. We can also provide an alt attribute to show text if the image breaks and does not show.

<img src="myimage.jpg" width="400" alt="my image">

Now if you want to make this image a link, you just put the <a> tags around it.

<a href="mypage.html">
<img src="myimage.jpg" width="400" alt="my image">
</a>

Line breaks and Horizontal Rules

A line break is a <br> tag. Again this is self closing. The <br> tag will break the link and push text on to a new line.

<p>
This is the first line <br>
This is the second line.
</p>

A horizontal line creates a solid line across the page. The <hr> is a block element, so if we remember, a block element takes all of the real estate of the page width.

<p>
This is the first line <br>
This puts a line between these two lines <hr>
This is the second line.
</p>

HTML Comments

A comment is code that will not be executed by the browser. It may be text that you want another programmer to read about what you are doing. Now I will say that when you write code, it should be self explanatory. That is good coding. You won’t see this too much with html because html is just a backbone, but when you code in JavaScript, Python or any other language, you should not write code in “clever” confusing ways that need to be documented. That said here is the html comment syntax.

<!-- comment here -->

<!--
This text will not 
be executed by the browser, however it can be seen by the "view source", so 
don't put sensitive date in here.
-->

Lists

We have two lists, ordered lists and unordered lists. Lists are nested. The ordered list <ol> has list items inside <li>, and the unordered lists <ul> has a list item <li>. The ordered list numbers the items 1,2,3,4,etc, and the unordered list is a list of bullet points.

<ol>
  <li>item one.</li>
  <li>item two.</li>
</ol>

<ul>
  <li>item one.</li>
  <li>item two.</li>
</ul>

Internal Links

Internal links are when we want to jump to a particular point on the page. Sometimes you see this when a long page has a table of contents. We do this with giving an element an ID. There should only be one ID per page, so there is no confusion. Then we will link to this element ID by giving that ID value to an <a> link. Like the example below. We give the h1 an id of “top”, and the link at the bottom of the page will have this ID as it’s value bringing us back to the top of the page or to this element to be exact. We have a link with “bottom” value which brings us to a div at the bottom of the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="top">Internal Links</h1>
    <a href="#bottom">Scroll to bottom of the page</a>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa et labore sunt quis dicta. Accusantium quam odio repellendus nulla ab, labore odit, esse molestiae at, totam voluptates fugiat aperiam illo.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa et labore sunt quis dicta. Accusantium quam odio repellendus nulla ab, labore odit, esse molestiae at, totam voluptates fugiat aperiam illo.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa et labore sunt quis dicta. Accusantium quam odio repellendus nulla ab, labore odit, esse molestiae at, totam voluptates fugiat aperiam illo.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa et labore sunt quis dicta. Accusantium quam odio repellendus nulla ab, labore odit, esse molestiae at, totam voluptates fugiat aperiam illo.
    </p>
    <div id="bottom">
        <a href="#top"></a>
    </div>
</body>
</html>

Favicons

A favicon is an icon that shows up next to your title on the webpage. It should be an image size of 32×32 pixels. We add a link element in our head section of the page. In the code below, we see a file extension of .ico. We can use jpg, png, etc. If we use a png the “type” needs to change to “image/png” or “image/jpg” respectively to the file you are using.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    
</body>
</html>

Tables

Tables are used for layouts. However, they are not used for layouts anymore. JavaScript is used for layouts, except for old websites. We have the table element, with <tr> table rows and <td> a data cell.

<table border="1">
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </table>

Merging cells and rows. colspan will allow us to do this. <td colspan=”3″>1</td> will span 3 columns. We can span rows too with rowspan. To see this click here.

<table border="1" width="100%">
        <tr>
            <td colspan="3">1</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>

Cell Width

We can adjust the width of a cell. Let’s look at an example that shows a cell width of 20% which will be used as a navigation. Here is a link to the output.

<table border="1" width="100%">
        <tr>
            <td colspan="2">Welcome to AreoSpace.com</td>
        </tr>
        <tr>
            <td width="20%">
                <h4>Navigation</h4>
            </td>
            <td>
                <h4>Content Here</h4>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ducimus illo ex delectus necessitatibus, suscipit, et libero esse, possimus totam nemo labore facilis dolorem animi tempore voluptates qui ullam. Sequi?
            </td>
        </tr>
    </table>

Let’s add a Table Header <th></th> which will center an bold the text. Replace the td with the colspan=”2″ with th. Click here for preview.

<table border="1" width="100%">
        <tr>
            <th colspan="2">Welcome to AreoSpace.com</th>
        </tr>
        <tr>
            <td width="20%">
                <h4>Navigation</h4>
            </td>
            <td>
                <h4>Content Here</h4>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ducimus illo ex delectus necessitatibus, suscipit, et libero esse, possimus totam nemo labore facilis dolorem animi tempore voluptates qui ullam. Sequi?
            </td>
        </tr>
    </table>

HTML Entities

These are shortcuts for displaying characters. Click here for preview.

<body>
    &lt;b&gt; This is bold &lt;/b&gt; <br>
    copyright <br>
    <sup>&copy; 2024</sup> <br>
    <sub>&copy; 2024</sub>
</body>

Forms

Forms allow input from a user. They generally have an action which directs the form to another page or script for processing, and a method of POST or GET. There is a third one, but we won’t discuss it. The main difference between get and post is that get appends information from the form to the url, so any sensitive data will show up there, and can be cached by search engines. Post will not do this, and there are no length restrictions, plus binary data is allow.

We will look at a text input with a value of “Hello”. This value is shown by default. We also give it a placeholder which is text that shows up if the field is empty. Next we have a password input which is like the text only the text you type in cannot be seen. It will show up as asterisks. Then we have a textarea. The textarea has columns and rows. The text to be displayed goes between the tags. It too can have a placeholder, name, etc. The text in the textarea is whitespace sensitive.

Next we add a button. A button has a type of button, submit, or reset. Button type is for JavaScript. The reset type clears the data input on the form, and the submit type is an action that acts on the action of the form that we set up top. It can go to the same page, another page, a script to process in a database, etc.

Now with a button and a method of ‘get’ let’s see what happens. It takes the values for the name, password, and address and put them into the url, so be careful not to use this for sensitive data because Google or other search engines will store it thinking it is a legitimate url.

internal_links.html?name=Ron&password=mypassword&address=any+street+USA

We can also add ‘required’ to these input fields, and the form will not submit until they are filled. Next we look at the <select> which is a dropdown menu. It uses option elements. We give them a value. We can also disable the option, and we can we set a default option. Click Here for display.

<h3>Forms</h3>
    <form action="" method="get">
        <div>
            <input required name="name" type="text" value="Hello" placeholder="Enter your name here">
        </div>
        <div>
            <input required name="password" type="password" placeholder="Enter your password here">
        </div>
        <div>
            <input required name="email" type="email" value="Enter email">
        </div>
         <div>
            <textarea name="address" cols="30" rows="10" placeholder="This is a textarea"></textarea>
         </div>
         <select name="selected_options">
            <option value="" disabled="disabled">-Disabled-</option>
            <option value="default-value" selected="selected">Selected by default</option>
            <option value="value1">value1</option>
            <option value="value2">value2</option>
            <option value="value3">value3</option>
            <option value="value4">value4</option>
         </select>
        <div>
            <button type="submit">Click Me</button>
        </div>
    </form>

Embedding Videos

Embeds use an iframe with an src for the source url. I will go to my YouTube channel, and I will grab an embed from the share option. Click for preview.

<iframe width="560" height="315" src="https://www.youtube.com/embed/InI3E78cZJs?si=BAgLhhVaRvS0n-YI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

A rudimentary site of using tables. Click here.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ron's Project</title>
</head>
<body>
    <table border="1" width="100%">
        <tr>
            <th colspan="2">
                <h1>Ron's Project</h1>
            </th>
        </tr>
        <tr>
            <td width="20%">
                <h3>Navigation</h3>
                <ul>
                    <li>
                        <a href="https://youtube.com" target="_blank">YouTube</a>
                    </li>
                    <li>
                        <a href="https://twitter.com" target="_blank">Twitter/X</a>
                    </li>
                </ul>
            </td>
            <td>
                <h3>Content</h3>
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore corporis amet, tempora laudantium dolore a velit, nostrum accusamus adipisci repellat, quisquam reprehenderit aut quis! Accusamus, aliquid. Dignissimos provident eius ex.
                </p>
                <img src="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?q=80&w=2264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Laptop Macbook" width="400">

                <iframe width="560" height="315" src="https://www.youtube.com/embed/z6aqk2lFzWY?si=kH66P8jLPgMNEtOr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </td>
        </tr>
        <tr>
            <th colspan="2">
                &copy; Ron's Project 2024
            </th>
        </tr>
    </table>
</body>
</html>