Blog #2

Blog #2

This post must include, at a minimum:

1. 
   
   
   Description of how you used HTML and CSS
   HTML
   I used HTML to create a basic web page for my HTML assignment during week 5.
   1. I used basic tags such as: HTML, head, body, paragraph, title, header 1, 2, 3, and 4. I included an external link, an unordered list, and an image tag. The title of my web page was "My First Web page for ETEC 5213." I titled the header 1 tag "My Favorite Photo" to indicate the purpose of the image that I had included which was a recent and favorite photo of my husband and myself. I added a photo tag for my favorite photo and I enclosed a paragraph to explain the photo. I used the h2 tag to indicate the purpose of the external link which was titled my favorite song. I included a working external You Tube link of my favorite song and I used the header 3 tag to indicate another change in the web page. I titled it Contact (my first name) to indicate a link to my email address which soon followed. I included my personal school email address that worked promptly. The final tags I included was the h4 tag and the unordered list, the h4 tag indicated and titled my last entry of my website which was the unordered list. The h4 tag was titled my favorite movies and it listed three of my favorite movies

CSS: 

I completed over 10 edits to a CSS style sheet that was assigned to us in class. The style sheets were assigned to each student and each student was required to create 10 edits such as: 

Instructions:

Make 10 edits to your assigned CSS file (using something like Notepad, Wordpad or TextEditor for MAC) :

• At least one edit must be for a font color.
• At least one edit must be for a font size.
• At least one edit must be to a heading tag.
• Use CSS to change the placement of one image.
• Change the background color for one div or .
• Change the padding or margin for at least one element. 

       I used Microsoft Windows Notepad to create the necessary edits in the CSS style sheet I was assigned. The first change I began with was editing the background color in the body. I changed the body background color from #F3EBE to #C0C0C0, the font family was changed from Geneva to Verdana, the font size within the body was changed from .9em to .8em. I edited the background position within the header from the left top to the right top.  I included a background color change within the header from #B1C6F5 to #F0888A.  I also included edits of the header 1 and header 2 font size from (header 1--> .6 em to 24px and header 2-->1.4em font size to 20px. The font color within the H2 tag was changed from #000066 to #800000. Within the body, I edited the image placement from the left top to the right top, and I included a bottom and left margin change within the paragraph.The margin change was originally a 25px margin-bottom to a 50px and the margin left was 100px and I changed it to a 125px. I edited the following link colors: the first link was #0000CC and I edited it to #000080. The visited link was the color#660066 and it was edited to the color #008000. The h1 also received a color change from #990000 to #000000. The unordered list was set to the right and I moved them to the left. The #container background color was #F9F2DB and it was edited to #EAE4EF, and the final edit was the background color of the footer which was #6FB8EE to #EAF3DA.

2. What obstacles you encountered 

HTML

 The obstacles I encountered was my image was too large and I had to create a smaller file.The main obstacle I had was my image would not link to my web page and I did not understand why.

CSS

 The obstacles I encountered during the edit of the CSS file was the font-size was too large and it made the size of my fonts too small to read. It was not visible and of course I panicked.

 

3. How you resolved these obstacles

HTML

I used Adobe Photoshop CS3 to optimize the photo for the web and it uploaded but, after several attempts I finally looked at the HTML tag and noticed I had JPEG and not JPG, that makes a large difference! After I changed the wrong format from JPEG to JPG it worked perfectly! :-)

  

CSS

After I reviewed the CSS changes I made, I had noticed that I made the font size too large and it could not be contained on the CSS page so it automatically made the font smaller to fit the page. I immediately made the necessary changes to the font size and increased the size and when I reviewed it in the switch.html file, it was normal and excellent!!!

3. What successes you experienced (what you learned) 

 The successes I experienced was learning to gain confidence in myself more within this course. This course is pushing me gradually out of my comfort zone and I am learning to achieve things I never thought I could do. I am so humbled to learn that I need to have more confidence in myself and allow myself to grow in this course. By allowing myself to grow in this course, I am gaining more knowledge and experience and preparing myself to excel in the web design course next semester! :-) The successes I have gained the past 2 weeks are the knowledge of learning how to create a basic HTML web page and how to use CSS to change a web page. CSS style sheets really make a large difference in how the web page is presented! :-)

5. Ideas about how you can use HTML and CSS for future projects

The ideas I have about using HTML and CSS for future projects is creating a class website for students to gain access to course assignments, lectures, and other class-related items for a high school. It could be used to teach high school students and undergraduate students how to build a basic website. It may be used in a business setting as a basic web page  or website for a business that wants to promote their basic business strategic plans. It may be used for non-profits to include basic knowledge of what the non-profit is and what their purpose and goal is in their local community.