Savvy Script.

Home » 2016 » July

Monthly Archives: July 2016

What is HTML?

Taking something apart is a great way to understand more about it. With that in mind, I thought I would write an article that attempts to deconstruct HTML by discussing its parts in order to communicate what it is more generally.
hypertext
For starters, HTML is an acronym for Hypertext Markup Language. Hypertext is the connection of objects (information content) to each other. It allows users to go from one document to another with just a click. A website is usually made up of various information content that are linked to each other and to other documents on different websites by a series of hypertexts.

markuplanguage

 

 

It’s a markup language, and that’s where the second half of its name comes from. It’s distinct from programming and scripting languages, which are more complex and are used by people to give instructions to computers or to automate tasks on a computer. In contrast, markup languages are used to define, process, and present content, as well as format the layout and style of the content in a document.

HTML code is inputted into a document to be displayed on the World Wide Web. It can be written in a simple text editor like TextEdit (Mac) or Notepad (Windows). Once written, it can be saved as an html file by adding the extension .html or .htm to the file name. As an html file, it is used as the basis of a web page and can be read and presented by a web browser.

Screen Shot 2016-07-28 at 5.43.53 PM

An HTML document is made up of a series of codes called markup tags, which group and classify elements on a web page. Tags define the different parts of a page or the elements on the page, and they usually have to be opened <> and closed </>. The essential tags that every webpage needs is an <html> tag, a <head> tag, and a <body> tag. To illustrate the way that HTML code classifies and defines parts and items on a page, let’s take a look at how these essential tags perform this function to create the multitude of webpages that we interact with every day.

boxes

The picture above shows the HTML document for a simple webpage. Note that there are two different types of boxes: the shaded-in boxes (blue, green, and yellow) and the outlined boxes (red). The boxes each highlight the various components that make up the code. The blue box highlights the HTML component, so you’ll notice that it covers the entire document from start to end. Since the document begins with an opening <html> tag and ends with a closing </html> tag, that signifies that everything in between these two tags are part of the html component (!DOCTYPE declares the type of document and is always needed as part of the document so it’s also highlighted). These ‘components’ as I’m calling them may sound pretty obvious, but it’s useful to see that HTML code is in fact organized into a number of large sections, or else it’ll appear more chaotic then it really is.

Elements can contain other elements within them, and this is true in this case with the <head> element. In the image, the <head> tag is shaded in by the green box. The head element usually contains things like meta data for search engines that aren’t presented as visible content on the site. In this code, the head element contains a <style> element, which is outlined by the red box and defines the style of the page’s content. As we can see, the style element is opened and closed as most tags are. The opening and closing tags informs the browser of the parameters of a particular element: for instance, when the browser sees a <body> opening tag, it begins to present the content of the body defined in the HTML document, and when it sees the closing </body> tag, it knows that the body content has ended and it can move onto reading and presenting the next element. So, to put things into perspective: the <html> tag contains a <head> element, which contains a <style> element. The style element then classifies the parts of the page (header, nav, and section), and each part contains its own attributes, which defines additional parameters of the elements (colour, font, alignment, etc.).

The next part of the HTML document is the <body>, which is highlighted by the yellow box. This section will contain content that is visible on the webpage. Remember, markup tags work in the background to set the parameters, classify and define what you see on a webpage, but they don’t actually show up as content on a browser. It’s usually easy to spot the content that will actually be visible when it’s presented on a web browser because visible content won’t be enclosed in angle brackets the way tags are—rather, they’ll be surrounded by them. The tags on either side of the visible content prescribe its appearance and relation to the page.

In the sample  document, the <body> is made up of several sections, which are outlined by the red boxes. div elements are empty containers that divide up sections of a page (visit my other post for more on the div element). While we won’t get into too much detail on them here, the essence of it in relation to how HTML functions is this: as inherently empty containers, the div elements in the body each use an id attribute to identify themselves as a previously defined element in order to take on and present its attributes. The reason for using the div element is that they are designed to contain content and can be used to take up blocks of space on a page at various widths and heights, so they’re perfect for sectioning out and visually compartmentalizing content on a webpage. Without the div tags in the body, the sections and content would simply be stacked on top of each other into one giant body, rather than being partitioned off into vertical and horizontal columns, with its content contained neatly inside.

HTML is formally recommended by the World Wide Web Consortium and is supported by all major browsers. If you’re ever curious about how a particular page is created, browsers allow you to view their codes by right clicking on a page to view its page source. Some can appear to have a pretty complex set of code, but by starting out with breaking them up into their larger components, it will become easier to read them and create your own.

Book Analysis: Expression and Identity in Ann-Marie MacDonald’s Fall On Your Knees

Today I reworked an old essay and remembered how much I love writing analytical pieces. It’s challenging and feels really creative. There is something thrilling about trying to organize and then communicate the workings of something that really gets you into the heart of whatever you’re writing about. Note to self: write more analytical pieces!

Today’s post is on a novel by Canadian author, Ann-Marie MacDonald. I was introduced to this book during my undergraduate studies and I couldn’t help being immediately drawn in to the book’s compelling narrative. MacDonald’s writing style is easy to read and the shifting perspectives really put me into the world of the characters. I found it difficult to put down because with every page, I was eager to find out what happens next. It does however, deal with pretty dark themes like sexual abuse, so it may not be for everyone.

 

     ⚡     ⚡     ⚡

The Piano as a Symbol of Intimate Authenticity in MacDonald’s Fall On Your Knees

In Fall On Your Knees, Ann-Marie MacDonald uses the piano as a recurring object which conveys the necessity of accepting one’s nature and the destruction that comes with suppressing it. According to an article in Music Therapy Perspectives based on the study of the psychological and emotional associations placed on the piano, data collected showed that the instrument is viewed as enabling “emotional expressiveness” and providing individuals with “the ability to project one’s inner world and to encourage one to be authentic and real.” In addition, knowledge and experience of “one’s identity” is closely associated with the piano and piano-play (Avi, Lavi and Zilberberg 2011). Fall On Your Knees builds on the connection between intimate authenticity and the piano: MacDonald uses the piano in her novel as a symbolic object of authenticity and truth by presenting it as a catalyst for genuine expression and truthful perception when used without constraint, while associating James’ restrictions on the instrument with his militant suppression of natural expression.

*  *

The limitations that James places on Materia and Mercedes’ playing reflect the girls’ emotional suppression caused by his neglect. On the other hand, spontaneous and unrestrained musical play allows them to sincerely express their emotions, and in turn experience momentary consolation. James’ stifling of parts of Kathleen’s identity is represented by his discouragement of her appreciation for racially diverse music. On the other hand, Kathleen’s later realization and acceptance of her natural identity in its fullness is reflected by her unrestrained enjoyment of diverse forms of musical expression. Finally, whereas James’ prohibitions placed on the Piper family’s piano is expressive of his concealment of tragic events in the family’s history, the piano’s uncensored display of reality depicts it as a symbol of acknowledgement and acceptance of whole truths.

*  *

James places constraints on Materia and Mercedes’ piano playing, which reflect the girls’ emotional repression caused by their father’s prolonged neglect. Shortly after their marriage, James becomes increasingly frustrated with Materia’s behavior, and soon his enthrallment with the young bride deteriorates as he loses all affection for her. James neglects his wife’s emotional needs entirely, and her desire for physical intimacy with her husband in the desperate hope that she will produce a son to regain her estranged father’s love meets with complete disdain from James: “her husband wouldn’t come near her. Got angry if she touched him”(34). Living in an unfamiliar and remote town, James’ emotional neglect of Materia forces her to suppress her feelings and desires. When she is asked by the Blackville Society Tap Twizzlers on a musical tour, she “knew better than to ask” James, and counter to her true desires, declined their offer, “[crying] on the way home at the thought of how happy she and James could be, seeing the world together with a travelling show”(53). Materia is limited in her musical expression in the same way that she is forced to conceal her emotional expression. James enforces routine and order on her musical expression: “Materia was permitted to play piano again, this time exactly what was put in front of her: scales, intervals”(36, emphasis mine). This passage presents the piano as an object that symbolizes emotional expression: musical expression is interconnected and reflective of emotional expression because both musical expression and emotional expression provide Materia with personal freedom and consolation that is gained from emotional release. Rather than playing songs of her choice, James restricts her playing to only “scales” and “intervals” which represent an imposed order, and therefore a limitation, on her musical expression. Just as Materia’s expression in the form of music is constrained by James’ control over her playing, her expression in the form of emotion display is similarly suppressed by his disregard.

*  *

Likewise, Mercedes’ musical expression is also shown to be restricted by the patriarch: “Mercedes smiles at Daddy and proceeds obediently to the front room, forces to wait dinner after all…She sits at the piano and grits her teeth at the sound of Lily giggling and running to Daddy. Mercedes opens the old Let Us Have Music for Piano and plays”(206). Describing a casual musical performance among family with words like “obediently” and “forces” indicates the imposition of order and restriction of expression that James places on her musical play. Depicting the interconnection between James’ emotional neglect of Mercedes and her restricted piano-play, the scene illustrates Mercedes obediently enacting her expected role on the piano as she disappointedly waits for James to acknowledge the supper she enthusiastically prepared for him. The constraint imposed on Mercedes’ musical expression as she “grits her teeth” while being forced to play her father’s favourite tune is mirrored by the concealment of her hurt feelings as she sits there, unappreciated.

*  *

While James’ emotional neglect encourages Materia and Mercedes to suppress their emotions, the piano allows them to express themselves emotionally and find consolation through spontaneous play. Materia’s longing to be with her family became apparent shortly after her marriage to James and this alienation from her relatives contributed to her mental decline and social withdrawal. MacDonald contrasts the limitations that James enforces on Materia’s musical expression with spontaneous and unrestrained play. Whereas James’ control over her musical output is reflective of the emotional suppression that he cultivates in her through his neglect, her spontaneous compositions are conveyed as unfettered musical expression that reveal the fullness of her emotions: “she’d begun playing whatever came into her head whether it made sense or not–mixing up fragments of different pieces in bizarre ways, playing a hymn at top speed, making a B-minor dirge out of ‘Pop Goes the Weasel”, and all with the heavy hand of a barrelhouse hack”(23). This passage conveys the piano as enabling a form of expression that is both intimate and unchecked by restrictive forces. Playing an existing composition containing pre-existing arrangements would suggest that an imposition of order and limitation on her musical expression. However, Materia’s unique and spontaneous blending of fragmented pieces at varying tempos shows an authentic and unfettered expression of her own chaotic emotions.

*  *

Because of Materia’s isolation and acute nostalgia for the Mahmouds, her anguish and desperate confusion in deciding to leave her family for James is communicated in all of its depth through fragmented musical pieces, arbitrary tempos, and intuitive riffs. While her piano at home allows Materia to communicate her sorrows, the piano at the Empire enables her to fully express her joy as she plays music guided by natural impulse and emotion: “she was happy as long as she could play. Down in the orchestra pit she consoled herself with the occasional embellishment”(53). Materia’s “spontaneous compositions”(52) and “occasional embellishment” on the piano provide her with consolation because of the emotional release that musical expression provides. Her performances’ leniency towards conventional arrangement illustrates her unordered, and therefore more “natural” musical and emotional expression that is unimpeded by regulation; while the “performers complained [about her spontaneous disorder]…the audience ate it up”(53). Materia’s unrestricted musical performances create intimacy with her audience through their openness of her raw and authentic expression. These experiences provide her with two things that her marriage to James lacks: the ability to freely express herself and the fulfillment that comes from another person’s appreciation of that expression.

*  *

Spontaneous musical expression also allows her daughter Mercedes to express her feelings for Kathleen which have been suppressed by her father: although James forbids any photos of Kathleen in the house, Mercedes takes a photo of her late sister and “props it on the music ledge next to the song book…Mercedes starts to play. And to sing sincerely”(259). Because James is unable to manage his immense pain when recalling his late daughter, her memory is physically erased from sight, and forcefully repressed in the memories of the family members. However, the piano is used to symbolically uncover the family’s suppressed memories and complex feelings towards Kathleen. In this scene, Mercedes immerses herself in Kathleen’s memory by bringing it into full view when she places it on the piano. Bringing Kathleen’s portrait into plain sight is both a tribute to the existence of her late sister and the events surrounding her life and death. Just as the piano provides a physical pedestal for Kathleen’s photo, it also provides Mercedes with a physical means to “sing sincerely” to her memory.

*  *

The restrictions that James places on the piano reflect his denial of Kathleen’s identity, through his suppression of her Lebanese background. Whereas James places physical restraints on the piano by limiting and dictating what Materia and Mercedes could play, James’ denouncement of “coloured music”(242) places mental limitations on the types of music Kathleen could appreciate. Upon first meeting Rose, Kathleen’s disregard for the pianist illustrates the firm restrictions that James placed on his daughter’s ability to appreciate diversity in music: “Rose is an extremely good pianist…you don’t notice the quality of the piano accompaniment during your lesson unless it is incompetent. But this pianist is doubly inaudible because she is black and therefore outside any system that nurtures and advances a classical virtuosa”(125). This passage conveys Kathleen’s limited appreciation for music that is identifiably “ethnic”—Rose’s musical expression is a reflection of herself and because Rose is evidently black, her music is devalued and overlooked by Kathleen. Her lack of acceptance of ethnic music reflects her denial of her own ethnic background. James’ intolerance and concealment of the family’s racial blend forces Kathleen to suppress aspects of her ethnicity, and therefore of her own true identity. This is evident in the guilt that Kathleen experiences when she listens to her mother’s Lebanese songs, and her subsequent refusal to embrace and enjoy them: “[Kathleen] tried not to understand the song. She tried to think of Daddy and light things–fresh air, green grass–she worried that Daddy would know. And be hurt”(39). This passage depicts the lack of acceptance that Kathleen has towards aspects of her identity: her need to make an effort to “not to understand” her mother shows that her racial background is an intrinsic part of her. However, James’ suppression of the family’s Lebanese side prompts her to suppress her identity in its fullness, and this is reflected in the restrictions that are placed on her appreciation for diverse music.

*  *

MacDonald presents the piano as a catalyst in Kathleen’s uncovering and acceptance of her own identity. The piano is a central object in allowing individuals to express their whole and authentic selves—this expression of one’s individuality through music is captured in Rose’s spontaneous musical compositions: “there is no difference between her own music and her mind”(126). This passage equates Rose’s music with her individual identity and states that the two are indistinguishable. Later, Kathleen’s utter captivation and immersion in Rose’s music and life is symbolically illustrated in her sexual involvement with Rose, and demonstrates her own desire to connect to her own ethnic identity. The sexual relationship between the two women symbolizes Kathleen’s acceptance of her whole identity—an identity that is evident by being in harmony with a more heterogeneous, and authentic music: “I wanted to live in that music, no, to wear it loose around me instead of skin, and after a while I had this flooding thought that this was Rose just thinking…It couldn’t be the Lebanese side could it?”(484). This passage illustrates Kathleen’s departure from her habitual racial prejudice and her acknowledgment of her own “Lebanese side.” In addition, her desire to “wear” Rose’s music, as well as her enthrallment with the racially diverse Jazz scene in the city, symbolizes her acceptance of her own racial background and her appreciation for all of the aspects of her identity. Her father’s concealment of the family’s racial mixture forced Kathleen to form a limiting personal identity by only acknowledging her Caucasian background, while suppressing her “coloured” side. With her acceptance of her full family background, both of her racial aspects are integrated into a complete whole. Kathleen’s enthralment with Rose and the racially diverse music of the city symbolizes her separation from James and the familiar restrictions imposed on her, which finally allows her authentic self to emerge: “Kathleen is truly and utterly and completely Kathleen in New York”(122).

*  *

James’ concealment of the dark events of the past is symbolized by the restrictions which he imposes on the piano at the Waterford home. His prohibition of Kathleen’s photographs on the piano represents his denial and inability to deal with difficult truths. When James catches sight of her portrait on the piano, where Mercedes absentmindedly placed it, he is again forced to face the reality of her death: “There are no pictures of Kathleen anywhere. Not a spinning wheel in the kingdom…and then you prick your finger.” The unexpected sight of Kathleen sends him into a rage because of the difficulty in reconciling his denial of her death with the tragic reality of her absence: “Now is the dim past. Then was the shining present…you know you’ll always be a slave to the present because the present is more powerful than the past, no matter how long ago the present happened”(260). This passage conveys James’ destructive mental state and the temporal distortion created by his refusal to accept and move on from Kathleen’s passing—James’ state of denial and suppression of past events allows him to remain a fixed “slave” to the past because it is “more powerful” and tolerable than the present reality. When Frances takes the blame for Mercedes’ mistake, her reasoning presents a stark contrast to James because it illustrates a rational acceptance of truth and reality: “Kathleen was my sister and I’d like to see her now and then”(261). However, James’ furious response to his daughter shows his refusal to alter the state of denial that he chooses to remain in and accept Frances’ accurate view of reality.

*  *

MacDonald contrasts James’ concealment with the representation of the family piano as a place of truth and acknowledgment. Whereas James suppresses difficult truths, the piano acts as an uncensored display of truth. Mercedes’ recollection and acknowledgement of having witnessed Frances’ rape by James is represented by her view of her father’s reflection in the piano: “The piano is a mirror but Mercedes is not staring at herself, she’s staring at her father passed out beneath the crocheted blanket”(376). This passage presents the piano as a “mirror” that clearly reflects the truths of reality. Mercedes’ acknowledgement and acceptance of her dark childhood memory is represented by the piano’s uncensored reflection of James beneath the crocheted blanket, displaying a duplicate image of James on the night of Frances’ rape. While Mercedes’ religious faith provided her with the false comfort of overcoming the “Devil” by making disturbing thoughts “disappear from her mind”(153), the piano exhibits plainly the sins of real life and represents her eventual acceptance of truth and reality. In addition to accepting the truth about her father, Mercedes’ acknowledgment of Frances’ son Anthony is also represented by the piano: “Mercedes puts the picture of Anthony on the piano, closes the piano bench over the record album, kneels down and folds her hands upon the lid”(558). Although Anthony’s existence was concealed for the full extent of his mother’s life, this passage suggests a final acceptance of the whole family in their dark and complicated entirety.

 

⚡     ⚡     ⚡

Detailed Walk-through: Use HTML and CSS to create a simple webpage layout from scratch

After using w3schools to get a good handle on HTML in just under two weeks, I decided to create my first tutorial on developing a webpage layout. The layout of a webpage is important because it determines how a page’s content is presented to visitors. Since at its roots, HTML only defines the pieces of content on a page, it is often supplemented with other languages like CSS, which specifies style, and JavaScript, which adds interactivity.

In this tutorial, we will use CSS and HTML to create a basic webpage layout. More specifically, we will use an HTML element called a div tag along with Internal CSS to create a multi-column layout. You can simply follow along with the images, which provide a step-by-step walkthrough of the HTML code, and input the code as you go. I also provide suggestions and explanations for those who want to know more about what exactly it is that they’re writing. The end result will be a clean and user-friendly page styled with multiple blocks of colour:
screenshot of webpage final look
I personally prefer to use an online real-time HTML editor so I can see the output of my HTML instantly, and then paste and save them in TextEdit on my MacBook when I’m happy with what I have. As I get more familiar with things that routine may change, but while I’m just starting out, I find it really conducive to my learning to catch and fix errors in my HTML as I’m writing them.

1. CSS Layout

HTML declaration
We’ll begin our HTML document by writing the CSS. After inputting the standard declaration, character set, and opening tags (<html> & <head>) of your HTML document, you’re ready to set the style of the page with CSS.

There are three different ways to use CSS to style HTML:

  • Inline is applied to single HTML elements
  • Internal is applied to a whole HTML page
  • External is applied to many pages

Since we’re styling a whole webpage, we’ll use Internal CSS.
The text inside the <head> section provides information about the HTML document. Because we’re using CSS to set the style of the document, the <style> element is put into this section.

head and style open tag

Now for the fun part! We can start to play around with the sizes and colours of the columns that make up the sections of our webpage.

          a) Header column

html layout shot
First, we can start off with the #header element, which occupies the top portion of the page.

CSS head element
A number sign # is placed before header so we can later refer to it in the body with an id attribute. Curly brackets {} are used around the properties of the element (the header in this case).

For the background, I chose to use a bright blue color named CornflowerBlue in order to showcase the webpage’s name, the color of which is set as white. I found this color on this website, which offers 146 other possible CSS colors to choose from.

I also set the font to avenir and aligned the text to the center. The padding is measured by pixels, and refers to the space around the text. It can be adjusted to take up more or less space, depending on your preference.

Note: Although I chose to stick to these in particular, they are not the only properties that can be adjusted. Visit this table for a full list of CSS properties.

          b) Navigation & Section columns

Now that we have finished styling our header, we can begin to style our navigation columns. The navigation bars allows users to navigate to different pages on the website. There are two navigation elements on the webpage: one on the far left named #nav, and another one on the far right, which is named #nav2.

nav and nav2 CSS
As seen in the above HTML, the navigation bars contain some properties that were not defined in the header. The line-height refers to the distance between lines within a block of text, and the height and width define precisely those aspects of the columns.

Occupying the center of the layout, the #section column contains the main content of the page and takes up the majority of the space, which is visible from its large width.

section CSS

          c) CSS Float property

Similar to the navigation columns, the #section element also contains a float property. This property defines the position of the columns in relation to the other components on the page. By default, items are stacked on top of each other in HTML. Thanks to the CSS float property, these items can be positioned beside each other by being pushed to the right or left of another item.

In our code, #nav is floated to the left, and #nav2 is floated to the right, while #section is also floated to the left. Notice that the section column appears as the middle column. This has to do with the sequencing of the div elements, which we will write later. Essentially, #nav and #nav2 must be referred to first when writing the following div sequence. Once the navigation bars are floated to the right and left sides of the page, the section column will then flow up into the leftover space in between them.

          d) Footer column

Finally, we can set the style for the #footer. This column occupies the bottom of the page and it can contain information such as a copyright, a link to your site map, a link to the company’s blog, or any other important information about the website.

footer CSS
Since the footer doesn’t really need to be eye-catching, I chose black for the background and gave it a modest size. The clear:both declaration prevents the floated items on the left and right from interfering with the footer. Now that we’ve defined all of the elements, we can conclude the CSS section by inputting the closing tags:

closing tags CSS

2. HTML div element and id attribute

The div element is a generic block-level element often used as a container for other elements. The id attribute uses CSS to style specific elements. We will be using div  and id along with our previously written CSS to create content on our webpage.
         

          a) Header & nav content

div and id NAV
Now that we’re ready to input the page’s content, we can add the body start tag <body>, as seen in the image above.

Next, we want to add the header to our webpage. Since we have already set the terms for the header, we can now pair the div element with an id attribute to define the column in the body and set it to the appropriate column properties by giving it the value header (since that’s what we named it in the CSS). Note that values are enclosed in quotation marks “” in HTML. After this, we can input the title of the website, which will show up in the header section. Because it’s the most important heading on the page, I enclosed it in <h1> </h1> tags. We can now close up the section with </div>.

The #nav and following sections begin in the same way, by pairing div with id and then referring to the desired section. I created space in between the navigation options (About, Products, Services, Testimonials) by using a Line Break element <br>.

          b) Nav2 & section content

nav2 &amp; section div
I decided to add some visual interest and balance for the #nav2 bar by adding a whole bunch of line breaks before the content (Contact, Work with us) in order to position them at the bottom of the column. In the case that this isn’t your cup of tea, you can obviously just omit the numerous <br> elements and have the navigation options appear at the top.

The #section column contains the main content of that particular page. I used the <h2> tag for the title of the section and a <p> tag for the paragraph.

          c) Footer & document close

footer div
The #footer section is written in the same way, so I’ll just place it there for you. Since there are no line breaks or extra elements, the content is simply put in between the opening and closing div tags.

After you’ve finished adding your final section and its content, you can close the HTML document by closing the body </body> and the html </html>.

And you’re finished! You’ve created a brand new webpage from scratch.

I hope you found this tutorial helpful in developing your webpage. If you have any questions or stumbled on any problems, feel free to send me an email at giangnguyen094@gmail.com or head over to my contact page to send me your concerns.

Note that HTML5 provides new semantic elements which can also be used to create website layouts instead of using the div tag. Both methods achieve the same result, but the div tag is a handy tool and is still used for creating layouts as well as for a variety of other purposes.

%d bloggers like this: