HTML Tutorial Day 1 Recap
Remember to always click “Update” when you’re done editing, and to always close the HTML function with the slash “/”.
Typeface
For some of these, there are handy buttons above the text editing box!
This is how to bold.
This is how to italicize.
This is how you underline.
This is how you make a link.
Columns
Columns can come in many different configurations. The important thing to remember is that you must have columns that add up to a total width of 12. You can split the web page into wide columns or skinny ones. For example, you could split the 12 into columns like this:
Split into 2 columns, each of 6 width:
Split into 4 columns, each of 3 width:
The columns don’t have to be even. They could also be split like this, into 3 columns of different widths:
Resizing Images
It’s best to crop or resize images prior to uploading them to WordPress, as that gives you the most control. However, you can edit the size of the image on the page by editing the HTML. But if you upload a grainy, low-resolution photo to WordPress, it will not look good at a larger size. So it’s always a good idea to get an image that has a high resolution.
Take a look at this image
Take a look at the HTML for the image. I’ve turned the relevant section into red. This dictates what size the image displays as.
< img src="https://lass.sites.olt.ubc.ca/files/2022/09/daniel-schludi-cassette-scaled.jpg" alt="Image of a cassette tape." width=”2560″ height=”1707″ class=”aligncenter size-full wp-image-2944″ / >
Let’s say we want this image to display much smaller. Let’s take either the width or the height ONLY and control the image size. Here, I’ll remove the height=”1707″ entirely, and then I’ll change the width=”2560″ to width=”450″.
Embedding Twitter Feeds
- Go to https://publish.twitter.com/#
- Enter your Twitter handle into the box, and choose which display type you want to generate.
- CLick on “Customization Options” to adjust the dimensions of the widget.
- Copy the HTML and paste onto the front page.
Here’s what it looks like with 400 width and 450 height!
Tweets by UBC_Sound
Accordions
Let’s practice making accordions. Unlike columns, you need to group accordions together. Think of it as a sort of hierarchy, like this:
- Begin accordions
- accordion
- accordion
- End accordions
The HTML looks like the following. Notice how the highest level of hierarchy is “accordions” – plural.
We’ll cover this next week, but an extra layer of advancement for accordions is to have the first accordion display as “closed” or “collapsed”, rather than already open when you open the webpage. Compare the above accordion with the one below.
