Cats
Cats are pretty cool. Meow!
The pages Favorite Things, My Week, and Colorful World all utilized different HTML elements to be written. This website has all of its CSS stored and linked on an external stylesheet, but the examples on this page will use the style attribute to use CSS on the same line as the element.
In the Favorite Things page, a section for a topic was defined using a heading, to visually separate different groups of images from each other. Then, below that, was a paragraph, which in this situation was used to create a caption for the images. Then, finally, the images themselves were placed as the main content of the page.
Cats are pretty cool. Meow!
The heading is created using the tags <h2> and </h2>. By inserting text inbetween the tags, content for the heading is created. In the above example, the heading would be written as:
<h2>Cats<h2>
Which results in
While this does have the text as wanted, the style is still plain. So, CSS can be used to change it using the style attribute. What I personally did for this website was adjust the margins, font, and border.
To add the line, I used the border-bottom. This creates a 2 pixel wide black line below the heading. Adding the line makes it more clear that the title represents the text below it.
<h2 style="border-bottom: 2px solid black;">Cats</h2>
Then, the font had some adjustments to change its size and font type with font-size and font-family. This makes the font size 28, and the font changes to a custom TrueType file I had added. Changing the font will make the elements of the website more unique.
<h2 style="border-bottom: 2px solid black; font-size: 28px; font-family: "Roboto";">Cats</h2>
Finally, I used margin to add margins and separate the heading from the webpage sides. This makes the header not stick to the edge of the webpage anymore.
<h2 style="border-bottom: 2px solid black; font-size: 28px; font-family: "Roboto"; margin: 60px;">Cats</h2>
The desired outcome is created.
The paragraph is created using the tags <p> and </p>. By inserting text inbetween the tags, content for the paragraph is created. In the above example, the paragraph would be written as:
<p>Cats are pretty cool. Meow!<p>
Which results in
Cats are pretty cool. Meow!
While this does have the text as wanted, the style is still plain. So, CSS can be used to change it using the style attribute. What I personally did for this website was adjust the margins and font.
The font had some adjustments to change its size and font type with font-size and font-family. This makes the font size 18, and the font changes to a custom TrueType file I had added. Changing the font will make the elements of the website more unique.
<p style="font-size: 18px; font-family: "Roboto";">Cats are pretty cool. Meow!</p>
Finally, I used margin to add margins and separate the heading from the webpage sides. The attributes margin-top and margin-bottom were used to only have margins on the sides but not vertically. This makes the header not stick to the edge of the webpage anymore, while not creating a huge gap vertically.
<p style="font-size: 18px; font-family: "Roboto"; margin: 60px; margin-top: 0px; margin-bottom: 0px;">Cats are pretty cool. Meow!</p>
The desired outcome is created.
Cats are pretty cool. Meow!
The image is created using the <img> tag, with the src attribute for the image source. On this website, the image's size is originally the desired size in the files.
<img src="images/cat1.jpg">
Which results in