Learning HTML5
- tmrogers78
- Sep 21, 2021
- 3 min read
Coding is often something people dread - or it's something that people consider the job of information technologists. However, it's helpful for educational technologists and instructional designers to learn to code. Many websites such as Blackboard, WordPress, and, yes, Wix help with coding, but more often than not there are limits to what you can do using these platforms if you don't have at least a basic understanding of coding.
This week I began the daunting task of learning HTML5 and CSS. I focused more on creating a basic webpage using HTML tags in my first webpage project. The webpage is similar to the "About Me" section of this blog. However, it has a few more bells and whistles. The webpage features a heading that's displayed in the browser tab that says what the page is about; several headings with my name, master's program, and university; a photo of me; a text narrative about me; some photos from my garden; and links to my blog and to my university email account.
I began the project by learning basic HTML5 tags including:
<html></html> to open and close your HTML5 text
<body></body> for the body of my page
<p></p> for paragraphs
<img></img> to insert an image
HTML gets more complicated the more you change text or background colors; add images, alternate text, and links; or specify font types or sizes. I found myself having to dig into the HTML tutorials at W3Schools.com to figure out how to specify a font color or background color. It all seemed simple enough. Worst case scenario, I copied and pasted the HTML from W3Schools, altered it to fit what I wanted, and tried to remember it for later.
The real challenge, however, came when I wanted to specify the font size, color, and type for my headings and my body. How do I do all of that in one HTML tag? I honestly had to do a Google search to figure this one out. The answer it seems looks like a big HTML run-on sentence where different styles are separated by semicolons - at least according to Bit Degree Learn. For example, I used the HTML below for my main heading with my name on it (or heading 1).
<h1 style="color:rgb(157, 34, 53);font-size:48px;">Tracy M. Rogers</h1>
This basically says that heading 1 has the color RGB 157, 34, 53 (Razorback Cardinal) in 48-pix font, and says "Tracy M. Rogers."
Likewise, I wanted my webpage to be a soft gray called Quartz, which has the RGB value 242, 242, 242. But, I also wanted all of the font on my page to be Verdana. Again, Google and Bit Degree Learn were my friends. The code below is how I accomplished this.
<body style="background-color:rgb(242, 242, 242);font-family:Verdana;">
Perhaps the hardest thing I wanted to do was to center align my headings and photos. This required using a <div></div> tag to create a division for just those parts I wanted to be centered. Luckily, FreeCodeCamp.org had instructions on creating the code below, which I used to center my headings, a photo of me, and a gallery of photos of plants from my garden.
<div style="text-align: center;"></div>
In the end, I learned to do the following things in HTML5 by completing this rudimentary webpage.
Start an HTML document.
Create a header for my page that will appear in the tab of a web browser.
Create headings using the HTML numbered heading tags.
Set the font on a webpage.
Set the background color on a webpage using RGB tags.
Set the font color of text headings and paragraphs using RGB tags.
Set the font size on different headings and paragraphs.
Insert photos and links into webpages.
Signify alternate text for photos.
Create divisions to change the alignment of certain elements on a webpage.
Create a copyright symbol on a webpage thanks to Career Karma.
Use the proper tags to end an HTML document.
Comments