3110 Week One – Tutorial

NOTE- This page has not been edited. Please excuse mistakes and issues regarding coherency.

iframes

Today in class, we brushed up on inserting iframe html into our blogs. Basically, iframes are codes meant to grab content (normally, some sort of visual) from third party web sources for the purpose of eliminating the redundancy of recreating the content on the host site. In other words, you are saving yourself the trouble of more work by copying and pasting content into the blog. I noticed that a lot of our classmates struggled with having to learn it, and I think this trouble largely comes from a lack of prior web editing experience. Thus, I made this post to serve as a potential reference for our peers.

The goal of this post is to provide a beginner’s html reference that could potentially help my classmates throughout the class.

Manual HTML Writing for Beginners

I understand that many of our classmates are not familiar with html. It’s okay; you don’t have to be. It’s pretty intimidating to learn, sort of like trying to teach yourself something like trigonometry. However, it’s not hard to understand the general gist of it and it’s a pretty handy skill to have. For those of you who feel like attempting it, I recommend this reference.

>EXERCISE: Google Chrome’s browser allows you to look at the a website’s page source (fancy way of saying code). Pick a random website and find a blank spot on the page to right click; on the window, choose “view page source” and you’ll get a full page of code. Compare and contrast it to other websites. If you want something interactive, repeat those steps but click “inspect.” Hover over those codes to see what codes correspond to things on the page! Note- you might have to collapse/uncollapse some of these via the triangles.

HTML for Cheaters

With HTML, particularly in WordPress, it’s very easy to cheat. Every conventional website in existence uses HTML, and, in many cases, have the same exact codes from website to website. Of course, there are many variations; some codes have more elements than others and other codes have specific parameters that other codes don’t. However, the consistency of HTML across websites makes it easier to read codes, look for patterns that exist in codes, and copy and paste. I am serious: many websites are made literally by copying codes from other websites. And I’m going to teach you how to do this.

WARNING- Just because I am teaching you does not necessarily mean you should do it. If possible, always get permission before you steal certain codes. The primary reasons I am making this tutorial is for the purpose of copying the base/common codes that don’t change (like hyperlinks, tables, graphics, etc.) and content that Dr. Wharton has given us permission to use. However, in the case of third party content, it isn’t fair for you to take credit for things that aren’t “in code” but coded in (e.g. you copy the codes for a paragraph [in code], but it also includes the written content of the paragraph [coded in]). For this class, it is safe to copy the part of the code that makes it a code, but not what coded content (the written stuff) is (without permission or listing the original source). I will edit this section as soon as I figure out a better way to word things. I am sorry for the confusion.

For this method, Google Chrome is your best friend because Google Chrome has a built in feature allowing you to look at the codes alongside the elements of a webpage. Minimal HTML knowledge is required for this method.

Tutorial

• Locate the element you wish to copy, like a table, title, or embedded Google content
• Right click the element and then click “Inspect”
• A code menu will appear either on the right side of your screen or the bottom
• All codes are not automatically shown. To the left of the codes, there are triangles to collapse some of them.
• As you hover over certain codes, the element are highlighted on the actual page. This is used as your reference.
• Hover over the codes until you find the element you wish to copy. You may have to collapse some codes.
• When you find the code that highlights your element, click it to confirm that it is the right one; your WHOLE element should be highlighted. If not, then either it is the wrong code or you might have to copy more than one code.
• When all the content you wish to copy is highlighted, right click the highlighted code on the code menu and click “Copy.” If there is more than one choice, than either click “Copy element” or “Copy HTML.”
• Paste the code in the desired location; if WordPress, make sure that the post editor is in “TEXT MODE.”
• Edit the elements if there are things you’d like to fix, such as size or links.
• Publish your content and finish.

iframe tag

If you don’t want to learn all the fancy stuff and just want to learn the html for the iframe tag, then here is the code: