HTML and CSS

HTML and CSS: Overview and Where I Am At

By Madison Nef

HTML is a coding language. HTML is one of the easiest coding languages to learn, and is often used in graphic and web design. It is similar to Python, but is more structured and uses a more straight-forward coding style. I have been taking an online course in coding and have so far gotten through 70% of the course. It is basic, but I have learned how to do a LOT in regards to website design. I started by learning the fundamentals of it: how to create text, how to color the text, and how to re-size text. I also learned to change the color and font of the text, and even learned how to enable and disable text decorations through various commands.

I can now also coordinate the code into neater, formed columns and I have learned to separate the different texts into headers of different sizes, paragraphs, titles and more. I can also customize all of this however I want using any text, color, size and font that the code recognizes. After learning how to structure a page and make it readable, I learned how to insert photos, links, and clickable image links onto the blank page I was working with. To add an image using HTML, you have to first add a h1 (a header) or a p (paragraph) so you have a place to put the image. Next, you add an image tag (making sure to use the proper format, <>) and then add the image source.

To add the picture to the project you are working on, you need to have the image’s URL. To attain an image’s URL, simply right click on the photo and then hit the “Copy Image URL” button and voila! You have the link copied. To finish adding the photo, add the src tag in front of the image tag, then an equal sign, and finally, close the tag. Then, whatever image you copied the URL from should appear in the project window. Here is how the proper format for a line of code (to add an image to a site) should look:

<h1 style="font-family: Arial; color:purple">Unicorns Are Amazing! :3</h1>

                                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQkatpOvAoa9riYJS3fEi5LmswVB9UlYsONsYN1-aaGgnEZVjs5OQ"

                <a href"http//:www.maddiesthinkathought.blogspot.com">

                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQkatpOvAoa9riYJS3fEi5LmswVB9UlYsONsYN1-aaGgnEZVjs5OQ">

I have also learned how to use CSS to neaten up my coding. CSS is another tab linked into the HTML tab that allows you to easily edit large chunks of code at once, giving them all the same text, color, font etc. while keeping your normal code clean and tidy. I can create tables with different borders, widths and lengths using HTML and can also change the colors using the color wheel (you can’t say ‘red’, ‘blue’, and ‘green’… if you want a more specific color, you have to use a color wheel and use the # symbol that specifies the color. Usually this # will look something like #FFF0000 or something close to it, as this is how the colors are named.

I am just learning how to use CSS for more advanced editing. I am learning about nesting bits of code and how to specify what bit I want to modify… but that’s about as far along as I am since the course is a beginner class.

Maddie