HTML & CSS - Images

Images play an important role in our society. They allow us to visually see what sometimes words cannot express or explain. In the case of webpages, images allow us to make the page more aesthetically appealing to attract an audience. “A picture can say a thousand words, and great images help make the difference between an average-looking site and a really engaging one.” (Duckett 97). Images help engage our audience with our webpage.

Within the fifth chapter of HTML & CSS, I had learned about adding and manipulating images in your webpage. To add images, you use the <img> element. This is empty tag which means that there is no closing tag (</img>). By adding a src to your <img> element, you are telling the browser where it can find the image. The value of src is set to a relative URL normally. The alt attribute allows you to add a small description of the picture. I had learned that the description isn’t an actual description that goes onto your webpage but instead describes the picture if you are unable to see it.

I had learned that images on a webpage are measured in pixels. Pixels are very small units that make up a digital photograph. “Images often take longer to load than the HTML code that makes up the rest of the page.” (Duckett 100). It is a good idea to alter the size of the image so the browser can edit the rest of the text so it leaves enough room for the image to load. This is when the text of a page appears before the pictures when loading or refreshing occasionally. This has happened to me many times before and the reason revolves around the size of the image.

Aligning your images is very important when organizing the content of your webpage whether it be horizontal alignment or vertical alignment. To align your images horizontally, you use the align attribute and set the value to either left or right, depending on where you want your picture placed (align=“left” or align=“right”). By aligning the picture to the left, it allows your text to shift to the right whereas by aligning to the right, your text shifts to the left. To align your pictures vertically, you set the value of your align attribute to either top, middle, or bottom (align=“top” or align=“middle” or align=“bottom”). This allows you to organize your webpage a little more, making it visually appealing.

Basically, the purpose of web design (in my eyes) is to make your webpage more attractive to the eye. By making it more attractive, it allows you to attract a larger audience. Images are significant to webpages because they provide a hint to the visitor as to what your webpage is about. For my webpage on music, I had inserted a picture I took of a small portion of my Spotify music list. After taking it, I had saved it into a folder created on my desktop titled “images” as the book had instructed me to save my image. Sadly, the image did not appear in my webpage how I wanted it to appear (size-wise) because I have not learned how to specify the size of the image. Although I have learned quite a lot from this book so far and am enthusiastic to find out what I will learn next.

What kind of people do you guys think should be skilled in web design?

Below I have inserted an image of the HTML code I created as well as the (not so great) view on Safari.

View in TextWrangler

View in Safari (as you can see, the picture is very big and doesn't show the text very well)

HTML & CSS - Links

Links are very important in the online world. They are very powerful Internet tools that help you interact with your audience. “Links are the defining feature of the web because they allow you to move from one web page to another — enabling the very idea of browsing or surfing.” (Duckett 75). There is a variety of links we can include in HTML pages. An example can be a link that takes you from one website to another website or a link that takes you from one page to another page on the same website. Sometimes links can open a new browser window or take you to your email program. Within chapter four of HTML & CSS, I learned how to create links within my HTML page.

When writing a link, you use the <a> element. Between the opening and closing tags, you can specify the page you want to link to using the href attribute. “The text between the opening <a> tag and closing </a> tag is known as link text. Where possible, your link text should explain where visitors will be taken if they click on it (rather than just saying “click here”).” (Duckett 78). When looking at this in a text editing application like TextWrangler, you can see the website that you would be directed to if you were to click on the link. When looking at it in a browser, you would simply see the link.

When linking to a different website from the one you are on, you follow the same procedure using the <a> element and the href attribute. It’s what you set as the value for the href attribute that matters. To link to a different website you use an absolute URL (Uniform Resource Locator) which is basically the full web address for the site. “An absolute URL starts with the domain name for that site, and can be followed by the path to a specific page.” (Duckett 79). These URL’s are very specific with where you are being directed to. When linking to other pages on the same site, you use a relative URL unlike times when you are linking to a different website. A relative URL is not as specific as an absolute because you do not need to specify the domain name. If you want your link to open up in a separate window, you can use the target attribute within the <a> tag with the value being _blank.

Links allow us to connect with our audience a little more through our webpage. They allow people to navigate easily through your webpage by creating shortcuts. With my example (below), I have linked the songs that I listed to videos that will open in different tabs. I had decided to do this because not only does it allow my audience easier access to the songs (rather than searching them), but it allows my audience listen to the song in a different tab where they won't have to go through the hassle of pressing backspace when they want to visit my webpage again. As you can see, links provide a way to connect with our audience.

Are there any songs that you guys would like me to add to my list?

Below, I have linked each song to a YouTube video that will open up in a new window.

View in TextWrangler

View in Safari

HTML & CSS - Lists

There are numerous occasions where we need to use lists. In the third chapter of Jon Duckett’s HTML & CSS, we learn about the different types of lists and how to create them on your webpage. HTML provides three different types of lists: ordered lists, unordered lists, and definition lists.

Ordered lists are lists where each item is numbered. For example, steps of a recipe would use ordered list because you must perform them in order. An ordered list is created with the <ol> element. Items in the list should be placed between the <li> opening tag and the </li> closing tag. Say, for example, the first step to create a cake is prepare and gather your materials. You would write this as <li>prepare and gather materials</li> in between your <ol> and </ol> elements.

Unordered lists are lists without numbers and are normally bulleted. An example of this type of list can be a grocery list. An unordered list is created using the <ul> element. Like the ordered list, each item in the list should be placed between the <li> opening tag and the </li> closing tag. Unordered lists are very similar to ordered lists but they simply have no organization or sequence to them.

Definition lists are lists that consist of a set of terms with their definitions. A definition list is created using the <dl> element. The <dt> tag is used to indicate which term is being defined. My way of remembering that this tag is used for the term is that I use the “t” in “dt” to represent “term.” Along with the <dt> tag is the <dd> tag that contains the definition.

Lists allow us to organize our content in a way that allows our audience to see how many points we are covering. It is another organizational method for your webpage. If you have a disorderly webpage, it may not attract as big of as an audience as you had expected. In my previous post, you can see how my list of artists and songs were simply separated by commas and looked more like a paragraph rather than a list. After using my new skill in creating lists in HTML, I was able to create a much more visually appealing format of my content. By creating lists to organize your content, your audience is able to read through it easily.

Do you believe lists are an important part of webpages?

Below you will see how I used an unordered list to organize my content in the HTML page I have been working on that discussed my musical preferences.

View in TextWrangler

View in Safari

HTML & CSS - Text

Now that we know the basic structure of an HTML page, it’s time we move on to learning how to add markup (tags) to the contents of the page to provide more meaning and structure to it. Within the second chapter of Jon Duckett’s HTML & CSS, I learned about structural markup which are basically elements that we can use to describe headings and paragraphs. I also learned about semantic markup which provide extra information. Semantic markup shows us where an emphasis is placed in a sentence or where a quotation starts and ends. This gives more meaning to the text.

We first learn about headings and their levels. Headings can be displayed at different sizes on browsers. The <h1> level is used for main headings and is the largest size. The <h6> level is the smallest size. These create sections so you can organize your text and create structure. Don't mistake the heading tag with a title tag because the heading is what appears in the actual page whereas a title tag appears in search engines and your browser's title bar.

When you look at a webpage, there is normally a heading to give you the gist of the content on the page thus making it appear more organized and professional which is what we’re aiming for.

The next area of focus within this chapter was paragraphs. In an HTML page, there is a specific way to format paragraphs. You use the opening tag <p> and the closing </p> tag to indicate the beginning and end of a paragraph. Automatically, your browser should display the paragraphs on a new line with some space between each paragraph. Although the browser will automatically show a new paragraph or heading on a new line, you can also add a line break. When desiring a line break, you may add the <br /> tag within your paragraph or sentence to create that new line. You can also create a break between themes by adding the <hr /> tag between paragraphs. This can be used when there is a change of topic in a book or a new scene in a play.

When adding meaning to the text, you may want to add strong or emphasis tags. The content of your <strong> element will appear in your browser in bold. The use of this element is mainly to emphasize the importance of your content. You can add the <em> element to indicate an emphasis that subtly changes the meaning of your sentence. Automatically, your browser should show the contents of an <em> element in italic. These two elements create a change in your content by adding meaning to it.

There are normally two elements that are frequently used for marking up quotations. These are the <blockquote> and <q> elements. The difference between a <blockquote> element and a <q> element is that a <blockquote> is used for longer paragraphs that possibly take up an entire paragraph whereas a <q> element is used for shorter quotes that sit within a paragraph. Another difference is that browsers display the <blockquote> element with an indent. Browsers normally put quotation marks around the <q> element. Both elements can use the cite attribute to indicate where the quote is from.

Abbreviations and acronyms are written a special way in HTML. For this, you use the <abbr> element. The full term is inserted into the opening tag to show what the whole term of the abbreviation is. For example, NASA is the acronym for the National Aeronautics and Space Administration. The element would be written as <acronym title=“National Aeronautics and Space Administration”>NASA</acronym>. It may sound complicated but it’s quite easy to understand once you understand the basics of HTML.

Citations and definitions have different elements as well. When referring to a piece of work such as a book, the <cite> element can be used to specify where the citation is from. Your browser will display the content in the <cite> element in italics. A <dfn> element can be used to show where you are defining a word in your text. “The <dfn> element is used to indicate the defining instance of a new term.” (Duckett 54). Some browsers may show the content of a <dfn> element in italics and some may not change the appearance.

I had created my own webpage with a musical theme (below). This was interesting to work on because it showed me how HTML may look complicated but once you understand the patterns and format, it's pretty simple. Although, at times, I became confused with where my closing tag went. Currently, my webpage doesn't look like much because I've only used my basic skills to create it. As I learn new skills, I will be applying them to the webpage to create it somewhat visually appealing. Although it may not be the next Facebook or Twitter, it is a start. Now that I knew the basics to HTML code, I had gone to a random website and clicked on 'view source' which allows me to see the HTML code of the webpage. I was able to understand why and how the webpage was formatted the way it was.

With these elements, we are able to add meaning and structure to the content of your HTML page. Every browser is different. "Browsers often display the contents of these elements in a different way." (Duckett 50). Structural markup and semantic markup are important because Google and other search engines see an HTML page without styles. The only way they understand which content is more important than others is through markup. For example, a business or company name can easily get lost within a paragraph tag with the other content without markup. But if you put the name within a <h1> tag, the search engine will know that it is more important.

If you were an expert at web design, what kind of website would you create?

Below is my example text using these elements.

View in TextWrangler

View in Safari

HTML & CSS - Creating a Website

We are convinced that computers are smart. It’s true but they aren’t very clever. They will only do what you want it to do, as long as you tell the computer to do it right. From a young age, I have always been enthralled by computers and how they work. I’ve grown familiar with the basics of computer programming and am eager to learn as much as I can about the fascinating machines and the different types of languages. Instead of doing an actual computer programming language, I had settled on learning how to use two markup languages called HTML and CSS to create and design my very own website. Although, creating and designing a website in an aesthetically pleasing way can be quite challenging, especially for a beginner, but Jon Duckett’s book breaks everything down in a simpler format. “Many books that teach HTML and CSS resemble dull manuals. To make it easier for you to learn, we threw away the traditional template used by publishers and redesigned this book from scratch.” (Duckett 5).

Within the first chapter of the book, I had learned the basic structure of a website. From this chapter, I had learned that HTML pages are basically text documents. HTML uses tags (< and >) which are often referred to as elements. They tell the computer when something starts or stops. “They act like containers and tell you something about the information that lies between them.” (Duckett 38). The opening <html> tag and ending </html> tag indicate that anything between them is the HTML code. The HTML code consists of the <body> element, the <head> element, and the <title> element that create the basic structure of your web page. With the code and the elements, you are telling your computer how to format your web page.

The book had taught me how to create a web page using an text editing application called TextWrangler on my Mac. Although the HTML code was simple, I was able familiarize myself with the basic structure of the HTML page. First, I had to download the TextWrangler application from barebones.com. Then, I used the text editing application to write the basic HTML code (below) I needed to create my very own web page. When I was able to pull up my creation on my web browser, I was excited, to say the least.

View on TextWrangler

View on Safari

Is web design worth learning? If you're planning on starting your own business or you have aspirations of creating a website like Facebook or Twitter, then the answer is yes, web design is worth learning. Personally, I had dreams of creating a website similar to Twitter or MySpace which is why I picked up HTML & CSS by Jon Duckett. "Understanding HTML and CSS can help anyone who works with the web; designers can create more attractive and usable sites, website editors can create better content, marketers can communicate with their audience more effectively, and managers can commission better sites and get the best out of their teams." (Duckett 5). Web design is important because aesthetic principles of a website play a big role when it comes to attracting an audience. The design of your web page helps with the organization of your website as well and creates a visual spark, something that attracts people. A simple web page like the one I created above would not attract as big of an audience as Facebook does.

Is web design hard to learn? It depends on who you are asking. Personally, I don't find it all that difficult to learn. Once you know the basics and the simple structure of the HTML and CSS languages, learning web design will be a breeze. 

Would you be up to learn HTML and CSS to create and build websites?