wwworkshop

Assignment 1: Text formatting

We now have heard of HTML and CSS, so let’s start with the first assignment:

  1. Open a new CodePen and log in to your account

  2. Go on the internet or your book shelf and search for a small poem you like. Maybe together with some context like title, author, year? Copy and paste that to the HTML editor and clean up the text so that it looks good in the HTML editor.

Raw text without HTML structure results in just one long text. Play with it on CodePen

Maybe it’s especially interesting when you choose a poem that already imposes some typography or text formatting.

📑 HTML

  1. Now we need to bring in some order using HTML. So this is how it works:
  • An HTML document is composed of single HTML elements, that can be arranged as siblings or nested structures
  • Elements are defined by <tags>
  • Each tag must open <tag> and eventually close </tag>, however there are selfclosing tags like <br /> or <img /> that are not allowed to have any content
  • There are various different tags with different meaning, like <h1> for headline or <p> for paragraph

Using HTML, we can structure the content. The browser applies its default stylesheet. See it on CodePen

These tags might help you with this task:

Play with it on CodePen

To find out more, check out these links:

Don’t try to solve this task as quickly as possible, but rather have a look at all the options, experiment a little bit and get comfortable to HTML.

🎨 CSS

  1. Now we need to make this more beautiful using CSS. This is how it works:
  • While HTML brings the structure and content, CSS adds the visual style
  • Use a selector like tagname or .classname to apply a style rule to an HTML element
  • Inside { that style rule you can list all the single style definitions }
  • Each definition is notated as property: value;. There is a defined list of avaliable properties and each property has a defined range of optional values.

The h1 css selector applies the style to the <h1> HTML element. Note that html and body are inserted for us by CodePen, so we do not have to type them in HTML, but can style them with CSS. Also check out how the text color is set individually for the h1, while the p inherits it from html.

These style properties might help you:

Learn more:

You don’t have to decide for one final result, but rather feel free to create multiple pens with different stylings.

Sharing our work

Once you’re done, share it with your groupmates and also do not forget to send it to me, so that it can be included on this website.