Mini Project #6 (9.R): HTML Poem / Song Lyrics

Mini Project #6 (9.R): HTML Song Lyrics

Link to Folder: https://drive.google.com/drive/folders/1A5uH8YEDAKUAs80YkI-BkLQn7nbdEdg9?usp=sharing

        This HTML Song Lyrics project consists of a collection of Indonesian old songs, which also displays its lyrics and integrates user interactivity by changing the colors of the lines of lyrics when you hover over them.

  •  
  •  
  • In which situations is it preferred to use Classes or IDs?

  • Classes are preferred to be used when we want to consistently style multiple elements throughout the page/site. While IDs are used when we have a single element on the page that will take the style.

 

There was a minor mistake when embedding the audio controls, the keyword source as a tag name, where ‘src’ is only an attribute. 

 

  •  
  • How can orderly file name convention (html files, CSS files, images, etc.) prevent errors when building a website?
    Organized file name will allow the creator of the site to easily edit the code when making some changes within the sites, since each site is interconnected it will be complicated if there is a mistake since you have to correct it in wherever location you mentioned your mistake. Having organization helps to avoid mistake and if there is, it would be easier to fix. 
  • How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are advantages of each over the other?
    Text editors such as Microsoft Word display the direct result of what we type, on the other hand, HTML allows us to write their own styling elements before becoming the end result. Advantages of using Word is that its instant, while HTML needs to be edited manually. 

 

Learning Outcomes

  • Develop web pages, exploring basic uses of HTML Elements (Tags) and CSS Styles.
  • Utilize CSS Selectors, Properties and Values to select HTML Elements and modify their Attributes.
  • Practice File Organization and produce proper links that connect to other page or file (image).
  • Recognize the differences between Classes and IDs and apply them accordingly.

Leave a Reply

Your email address will not be published. Required fields are marked *