Here is the command for a header tag which was used for the Welcome! at the top of the page and the title of the page HTML Tutorial

HTML Code:

<h1> This is h1 </h1>

Output:

This is h1

Here is the command for a header tag which was used for each section of the page such as Basic Commands

HTML Code:

<h2> This is h2. </h2>

Output:

This is h2.

Here is the command for a header tag which was used for each subsection of the page such as Text Modifications

HTML Code:

<h3> This is h3. </h3>

Output:

This is h3.

Here is the command for a bold tag which was used in the in the HTML Code: and Output: text.

HTML Code:

<b> This text is bold. </b>

Output:

This text is bold.

Here is the command for an italicized tag.

HTML Code:

<i> This text is italicized. </i>

Output:

This text is italicized.

Here is the command for a centered tag.

HTML Code:

<center> This text is centered </center>

Output:

This text is centered

Here is the command to change the font color and size.

HTML Code:

<font color="#ff0000" size="24"> This changes the text color to red using hexadecimal color values and changes the font size to 24px. </font>

Output:

This changes the text color to red using hexadecimal color values and changes the font size to 24px.

You can also combine different tags by embedding them within one another but this is a bit messy and it is better to use CSS.

HTML Code:

<b> <i> <center> <font color="#ff0000" size="24"> Using multiple tags. </font> </center> </i> </b>

Output:

Using multiple tags.

The hyperlink tag <a> allows one to create a link to a website. I created a hyperlink to the Adobe Color Wheel website which I found to be very useful when choosing different colors. The URL of the link goes in between the quotes after href=. The target="_blank" is optional but it allows the link to open up in a new browser tab rather than replacing the tab you are currently on. The Adobe Color Wheel statement can be replaced with whatever text you want as it is the text that shows up in the hyperlink tag.

HTML Code:

<a href="https://color.adobe.com/create/color-wheel/" target="_blank">Adobe Color Wheel </a>

Output:

Adobe Color Wheel

You can also link to pages within your own website just make sure the directory path is selected correctly. For example, my index.html file is in the same directory as my htmltutorial.html file so I can link it directly. However, if they were not in the same directory I would have to like it through the specific directories. In the Test hyperlink below, a test.html file is located within the directory Test which is in the same directory as index.html and htmltutorial.html. You can also jump up a directory (../htmltutorial.html) to link to a file above the current directory or go to root directory (/htmltutorial.html) directly as it can be tedious to keep jumping up directories (../../../). Click on the test link to see the extra links.

Note: The root directory method won't work if you are using your browser to preview your page as it takes you to the root of your current drive. You will need to upload your html files to the server in order for it to work.

HTML Code:

<a href="index.html" target="_blank">Home </a> <a href="Test/test.html" target="_blank">Test </a> <a href="../htmltutorial.html" target="_blank">HTML Jump </a> <a href="/htmltutorial.html" target="_blank">HTML Root </a>

Output:

Home

Test

You can link to a specific tag of a page using the id property. The first link takes you to the header div <div id="header"> on this page while the second link takes you to the h1 tag in the Text Modifications section. This can be done by adding the id property to any tag. For example, I gave the h1 tag in the Text Modifications section the id of this by including it in the h1 tag as follows: <h1 id="this"> This is h1 </h1>. The third link takes you to the Creating your Server Using EC2 Instances section on the Getting Started Using Amazon Web Services page.

HTML Code:

<a href="#header">Header Section </a> <a href="#this">Linking to the h1 tag in the Text Modifications section. </a> <a href="websitesetup.html#server" target="_blank">Creating your Server Using EC2 Instances section on the Getting Started Using Amazon Web Services page. </a>

Output:

Header Section

Linking to the h1 tag in the Text Modifications section.

Creating your Server Using EC2 Instances section on the Getting Started Using Amazon Web Services page.

The code below allows you to display an image on your webpage. The image location or URL is placed in the quotes right after src=. Here I have used a test image I created titled test.png located in the directory images\htmltutorial\. The second image is linking to the Google logo. The alt tag allows you to have some text in place of the image in case the website isn't loading or the image has been misplaced.

You can also include the style property (you can include it in any HTML tag) which uses CSS to modify that specific tag. Here we are using it to adjust the size of the image by stating style="max-width: 50%;" which makes the maximum width of the image 50% of its original value. Setting a maximum width allows the image to resize with the window. You can also set the width by stating an exact number of pixels. The Google image has a width of 500px and starts to become distorted as it is past its original size. It also does no resize with the window as we used width and not max-width.

An image can also be hyperlink by embedding it within a hyperlink tag.

HTML Code:

<img src="images\htmltutorial\test.png" alt="Test Image" style="width: 20%;"> <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Test Image" style="width: 720px;"> <a href="index.html" target="_blank"> <img src="images\osd.JPG" alt="Hyperlink Image" style="width: 20%;"> </a>

Output:

Below is the code to create an unordered list <ul> and an ordered list <ol>. The unordered list has bullet points as the default style while the ordered list has numbers as the default style. Each list then has within itself the list item tag <li> which has the content of each item in the list. You can embed a link within each list item if you would like as well.

HTML Code:

<ul>

<li> This is an unordered list</li>

<li> Which has bullet points as the default style</li>

<li> With different list items</li>

<li> One more item</li>

</ul> <ol>

<li> This is an ordered list</li>

<li> Which has bullet points as the default style</li>

<li> With different list items</li>

<li> <a href="index.html" target="_blank"> Home </a> </li>

</ol>

Output:

• This is an unordered list
• Which has bullet points as the default style
• With different list items
• One more item

1. This is an ordered list
2. Which has numbers as the default style
3. With different list items
4. Home

The break tag <br> causes items to start on a new line which is useful when formatting the structure of text or images of a website.

HTML Code:

<br> This is a line break which causes text to start on a new line but it does not create spacing between new lines
<br> Another line break which can be seen to not have any spaces between each line and only starts a new line. It is important to note that I have been using & l t br & g t between each set of tags in order to create spacing. For example, the images below now do not have the break tag in between them. <img src="images\htmltutorial\test.png" alt="Test Image" style="width: 20%;"> <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Test Image" style="max-width: 20%;">

Output:
This is a line break which causes text to start on a new line but it does not create spacing between new lines.
Another line break which can be seen to not have any spaces between each line and only starts a new line. It is important to note that I have been using <br> between each set of tags in order to create spacing. For example, the images below now do not have the break tag in between them.

The paragraph tag <p> is used to store the text of your webpage. I have been writing all the text of this webpage using the paragraph tag as it creates spacing unlike the break tag.

HTML Code:

<p> This is a paragraph which creates spacing above and below unlike the break tag. </p>
<p> This is a second paragraph. </p>

Output:

This is a paragraph which creates spacing above and below unlike the break tag.

This is a second paragraph.

As discussed in the image section, the style property can be added to any tag and can be used to stylize tags in many ways. Below is an example of combining different styles and different tags. This can be done in a much cleaner manner using CSS.

• background-color:#ff0000; Changes the background color to #ff0000.
• color:#ffffff; Changes the font color to #ffffff.
• font-family:Comic Sans MS; Changes the font family to Comic Sans MS.
• font-size: 26px; Changes the font size to 26px.
• text-align:center; Aligns text to center.

HTML Code:

<p style="background-color:#ff0000; color:#ffffff; font-family:Comic Sans MS; font-size: 26px; text-align:center;"> You can also combine different styles to create different effects using the style property. Click <a href="index.html" target="_blank" style="background-color:#A68F28; color:#965BB0; font-family:Courier New; font-size: 72px; text-align:center;">here to go to the homepage. </p>

Output:

You can also combine different styles to create different effects using the style property. Click here to go to the homepage.