Assignment 1: Text formatting with HTML

1. Login to CodePen and open a new Pen

2. Come up with a inspirational quote about webdesign or programming.

📑 HTML

3. 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

These tags might help you with this task:

• <h1>, <h2>, ... <h6> headlines of different hierarchies
• <p> paragraph
• <br /> or <br> line break
• <blockquote> quote
• <pre> preformatted text
• <em> emphasised (italic)
• <strong> strong (bold)
• <hr> horizonal rule (line)

To find out more, check out these links:

• Our small HTML reference
• Full list of available tags on w3schools
• HTML text fundamentals on MDN
• Google HTML secrets, learn HTML in 5 minutes, HTML text formatting

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

4. 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:

• font-family
• font-size
• text-align
• text-indent
• text-justify
• text-decoration e.g. for underlining
• text-transform e.g. for capitalizing
• text-shadow
• letter-spacing
• line-height
• color text color
• background-color
• margin outer space of an element

Learn more:

• Our small CSS Reference
• All CSS properties on w3schools
• Klasse Digitale Grafik CSS typography docs
• CSS selectors
• CSS unit
• CSS colors
• Or google CSS font styling, CSS typography, CSS ...

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.