Monica P.

Exploration Entry #3:

Scrolling/Floating Text

4/3/2021: Today, I learned how to add scrolling/floating text to a website. Please follow the steps below to add one to yours.

Step #1: Copy and Paste this into your HTML:

<marquee>I wanna scroll with it, baby!</marquee>

The code is from Make Use Of (MUO) . The marquee tag is basically a unique and usually forgotten tag that creates the scrolling banner effect so it's super easy to use and super cool!

Step #2: Add your preferred text!

<marquee>This is scrolling text! It can be used to flash announcements. You might see it on a clothing website to advertise sales or on a weather site to report dangerous weather or news!</marquee>

Step #3: Add CSS.

I chose to do internal CSS to make things easier. I changed the background color and font:

<marquee style=background-color:lightblue;font-family:verdana;>This is scrolling text! It can be used to flash announcements. You might see it on a clothing website to advertise sales or on a weather site to report dangerous weather or news!</marquee>

Final Product!

You can't get the full idea with a picture, but the text basically scrolls across the top like an announcement banner.

Exploration Entry #2:

Creating a Scrollable Text Box

3/5/2021: Today, I learned how to add a scrollable text box to my website. Please follow the steps below to add one to yours. (The directions I followed online were meant for an all-HTML text box, but I ended up improvising and adding some CSS to format the scrollable text box for my website.

Step #1: Copy and Paste this into your HTML:

Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :)</div>

The code is from Make Use Of (MUO)

Step #2: Insert preferred text where indicated:

**Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.**</div>

^^This is the filler text that I used.

Step #3: Adjust for your preferred look by adding and subtracting HTML style elements:

^^This is how I changed up the code. I changed the font family, aligned the text center, centered the actual box on my page using padding, and adjusted the height and width.

Step #4: Optional: Add CSS for the other elements you need but can't figure out in HTML:

^^First, I named the div "scrollbox" and made it an id because I'm only using it once. This is still in the HTML file.

#scrollbox

{

color: #B46203;

margin-bottom: 3%;

}

^^Next, I added this to my CSS. All I needed to do was change the text color and add a margin to the bottom so that the text box wouldn't be right on top of the footer. With that, I was finished! See below for the final product:

I tried to take an animated photo from my phone to show you the scrolling feature. Sorry for all the weird lines from the screen-to-screen capture, but I hope you get the idea of the feature.

Exploration Entry #1:

Adding a Tab Icon

2/5/2021: Today, I learned how to add a tab icon to my website. Please follow the steps below to add one to yours.

Step #1: Find an Icon

First, I brainstormed ideas for an icon. Since my website is all about my crochet projects and it has an orange theme, I wanted to find some kind of classic knitwear that shared the orange color.

I used the website icons8.com/icons/ to search free icons.

By searching the keyword "knit," I found the perfect orange beanie. I downloaded the image for free as a PNG file.

Step #2: Convert to .ico

Next, I needed to convert the PNG to a .ico file for any browser to recognize the image as an icon. I used the free file converter from hnet.com/png-to-ico/ to download the image as a .ico file.

Step #3: Move to Images Folder

Next, I moved to .ico file, which I named beanie.ico, to the images folder for my website.

Step #4: Add line of HTML Code

Finally, I added a line of code to the <head> section of my HTML in order to tell it where to find beanie.ico. I got the code from carlos-r-mendoza.github.io/how-to-add-a-browser-tab-icon-to-your-website . See the code that I used below.

** Put in <head> section of HTML5 sheet.

Replace "beanie.ico" with the name of your file.

Final Product!

See the top left corner of the image where the tab is displayed. The regular globe icon has been replaced with the beanie!

Page updated

Report abuse